luckysheet目前沒有打印功能，但可以通過它所提供的api自行實現。大致思路是通過luckysheet.getSheetData()方法，先左上角開始到右下角獲取有值的行和列，再使用luckysheet.setRangeShow進行選區操作，最后使用luckysheet.getScreenshot()生成base64的圖片，可使用一些打印插件實現局部打印，例如print.js，以下是相關代碼

? ?1.獲取有值的行和列的函數

// 獲取表格中包含內容的row，columngetExcelRowColumn() {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為容器idtitle: '牛利家園打印中心', // 設置標題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);} }

總結

以上是生活随笔為你收集整理的luckysheet实现打印功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。