luckysheet目前没有打印功能,但可以通过它所提供的api自行实现。大致思路是通过luckysheet.getSheetData()方法,先左上角开始到右下角获取有值的行和列,再使用luckysheet.setRangeShow进行选区操作,最后使用luckysheet.getScreenshot()生成base64的图片,可使用一些打印插件实现局部打印,例如print.js,以下是相关代码
1.获取有值的行和列的函数
// 获取表格中包含内容的row,column
getExcelRowColumn() {
const sheetData = luckysheet.getSheetData();
let objRowColumn = {
row: [null, null], //行
column: [null, null], //列
};
sheetData.forEach((item, index) => {
//行数
item.forEach((it, itemIndex) => {
if (it !== null) {
if (objRowColumn.row[0] == null) objRowColumn.row[0] = index; // row第一位
objRowColumn.row[1] = index; //row第二位
if (objRowColumn.column[0] == null)
objRowColumn.column[0] = itemIndex; //column第一位
objRowColumn.column[1] = itemIndex; //column第二位
}
});
});
return objRowColumn;
}
2.打印操作
printExcel() {
let RowColumn = this.getExcelRowColumn() // 获取有值的行和列
RowColumn.column[0] = 0 //因需要打印左边的边框,需重新设置
luckysheet.setRangeShow(RowColumn) // 进行选区操作
let src = luckysheet.getScreenshot(); // 生成base64图片
let $img = `<img src=${src} style="width: 100%;position: absolute;left:-20px" />`;
document.querySelector("#print-area").style.display = "block";
this.$nextTick(() => {
document.querySelector("#print-html").innerHTML = $img;
Print(this.$refs.printPayFeeNew) // Print.js插件
});
}
3.html 生成打印图片
<!-- 打印内容区域,默认不显示,点击打印后才显示-->
<div id="print-area" style="
display: none;
position: absolute;
z-index: 0;
top: 0;
width: 100%;
height: 100vh;
overflow: hidden;">
<div id="print-html" ref="printPayFeeNew"></div>
</div>
最后,如果需要打印包含图片的,则需要使用到cellRenderAfter方法,通过new Image()将图片渲染到相应的位置
luckysheet配置项
// 在线表格配置表
printPayFeeNewOptions: {
container: 'printPayFeeNew', //printPayFeeNew为容器id
title: '牛利家园打印中心', // 设置标题
lang: 'zh', //设置中文
showinfobar: false, //是否显示顶部信息栏
showsheetbar: false, // 是否显示底部sheet页按钮
showstatisticBar: true,//是否显示底部计数栏
showstatisticBarConfig: { //自定义配置底部计数栏
count: false, // 计数栏
view: true, // 打印视图
zoom: true, // 缩放
},
showtoolbarConfig: { //自定义配置工具栏
undoRedo: true, //撤销重做,注意撤消重做是两个按钮,由这一个配置决定显示还是隐藏
paintFormat: true, //格式刷
currencyFormat: true, //货币格式
percentageFormat: true, //百分比格式
numberDecrease: true, // '减少小数位数'
numberIncrease: true, // '增加小数位数
moreFormats: true, // '更多格式'
font: true, // '字体'
fontSize: true, // '字号大小'
bold: true, // '粗体 (Ctrl+B)'
italic: true, // '斜体 (Ctrl+I)'
strikethrough: true, // '删除线 (Alt+Shift+5)'
underline: true, // '下划线 (Alt+Shift+6)'
textColor: true, // '文本颜色'
fillColor: true, // '单元格颜色'
border: true, // '边框'
mergeCell: true, // '合并单元格'
horizontalAlignMode: true, // '水平对齐方式'
verticalAlignMode: true, // '垂直对齐方式'
textWrapMode: true, // '换行方式'
textRotateMode: false, // '文本旋转方式'
image: false, // '插入图片'
link: false, // '插入链接'
chart: false, // '图表'(图标隐藏,但是如果配置了chart插件,右击仍然可以新建图表)
postil: false, //'批注'
pivotTable: false, //'数据透视表'
function: false, // '公式'
frozenMode: false, // '冻结方式'
sortAndFilter: false, // '排序和筛选'
conditionalFormat: false, // '条件格式'
dataVerification: false, // '数据验证'
splitColumn: false, // '分列'
screenshot: true, // '截图'
findAndReplace: false, // '查找替换'
protection: false, // '工作表保护'
print: false, // '打印'
},
cellRightClickConfig: { //右键单元格菜单设置
copy: false, // 复制
copyAs: false, // 复制为
paste: false, // 粘贴
insertRow: false, // 插入行
insertColumn: false, // 插入列
deleteRow: false, // 删除选中行
deleteColumn: false, // 删除选中列
deleteCell: false, // 删除单元格
hideRow: false, // 隐藏选中行和显示选中行
hideColumn: false, // 隐藏选中列和显示选中列
rowHeight: false, // 行高
columnWidth: false, // 列宽
clear: false, // 清除内容
matrix: false, // 矩阵操作选区
sort: false, // 排序选区
filter: false, // 筛选选区
chart: false, // 图表生成
image: false, // 插入图片
link: false, // 插入链接
data: false, // 数据验证
cellFormat: false // 设置单元格格式
},
hook: {
// 单元格渲染结束后触发,return false 则不渲染该单元格
cellRenderAfter: function (cell, position, sheetFile, ctx) {
// 渲染结束后 收据图片
var r = position.r;
var c = position.c;
$that.drawingChapter(r, c, ctx, position)
},
},
data: null,//表格内容
}
// 渲染收据章
drawingChapter(r, c, ctx, position) {
let fees = $that.printPayFeeNewInfo.fees //费用项
let feeLength = Number(fees.length) //费用项长度,用于渲染行数
if (r === feeLength + 3 + 1 && c === 6) {
var img = null;
img = new Image();
img.src = $that.printPayFeeNewInfo.qrImg;
let width = (80 * img.width) / img.height
// 已经加载完成的直接渲染
ctx.drawImage(img, position.start_c + 10, position.start_r, width, 80);
}
}