luckysheet实现打印功能

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);
         }
}