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

? ?1.獲取有值的行和列的函數(shù)

// 獲取表格中包含內(nèi)容的row，columngetExcelRowColumn() {const sheetData = luckysheet.getSheetData();let objRowColumn = {row: [null, null], //行column: [null, null], //列};sheetData.forEach((item, index) => {//行數(shù)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 //因需要打印左邊的邊框，需重新設(shè)置luckysheet.setRangeShow(RowColumn) // 進(jìn)行選區(qū)操作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 生成打印圖片

<!-- 打印內(nèi)容區(qū)域，默認(rèn)不顯示，點(diǎn)擊打印后才顯示--> <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()將圖片渲染到相應(yīng)的位置

luckysheet配置項(xiàng)// 在線表格配置表printPayFeeNewOptions: {container: 'printPayFeeNew', //printPayFeeNew為容器idtitle: '牛利家園打印中心', // 設(shè)置標(biāo)題lang: 'zh', //設(shè)置中文showinfobar: false, //是否顯示頂部信息欄showsheetbar: false, // 是否顯示底部sheet頁按鈕showstatisticBar: true,//是否顯示底部計(jì)數(shù)欄showstatisticBarConfig: { //自定義配置底部計(jì)數(shù)欄count: false, // 計(jì)數(shù)欄view: true, // 打印視圖zoom: true, // 縮放},showtoolbarConfig: { //自定義配置工具欄undoRedo: true, //撤銷重做，注意撤消重做是兩個(gè)按鈕，由這一個(gè)配置決定顯示還是隱藏paintFormat: true, //格式刷currencyFormat: true, //貨幣格式percentageFormat: true, //百分比格式numberDecrease: true, // '減少小數(shù)位數(shù)'numberIncrease: true, // '增加小數(shù)位數(shù)moreFormats: true, // '更多格式'font: true, // '字體'fontSize: true, // '字號(hào)大小'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, // '水平對(duì)齊方式'verticalAlignMode: true, // '垂直對(duì)齊方式'textWrapMode: true, // '換行方式'textRotateMode: false, // '文本旋轉(zhuǎn)方式'image: false, // '插入圖片'link: false, // '插入鏈接'chart: false, // '圖表'（圖標(biāo)隱藏，但是如果配置了chart插件，右擊仍然可以新建圖表）postil: false, //'批注'pivotTable: false, //'數(shù)據(jù)透視表'function: false, // '公式'frozenMode: false, // '凍結(jié)方式'sortAndFilter: false, // '排序和篩選'conditionalFormat: false, // '條件格式'dataVerification: false, // '數(shù)據(jù)驗(yàn)證'splitColumn: false, // '分列'screenshot: true, // '截圖'findAndReplace: false, // '查找替換'protection: false, // '工作表保護(hù)'print: false, // '打印'},cellRightClickConfig: { //右鍵單元格菜單設(shè)置copy: false, // 復(fù)制copyAs: false, // 復(fù)制為paste: false, // 粘貼insertRow: false, // 插入行insertColumn: false, // 插入列deleteRow: false, // 刪除選中行deleteColumn: false, // 刪除選中列deleteCell: false, // 刪除單元格hideRow: false, // 隱藏選中行和顯示選中行hideColumn: false, // 隱藏選中列和顯示選中列rowHeight: false, // 行高columnWidth: false, // 列寬clear: false, // 清除內(nèi)容matrix: false, // 矩陣操作選區(qū)sort: false, // 排序選區(qū)filter: false, // 篩選選區(qū)chart: false, // 圖表生成image: false, // 插入圖片link: false, // 插入鏈接data: false, // 數(shù)據(jù)驗(yàn)證cellFormat: false // 設(shè)置單元格格式 },hook: {// 單元格渲染結(jié)束后觸發(fā)，return false 則不渲染該單元格cellRenderAfter: function (cell, position, sheetFile, ctx) {// 渲染結(jié)束后 收據(jù)圖片var r = position.r;var c = position.c;$that.drawingChapter(r, c, ctx, position)},},data: null,//表格內(nèi)容 }// 渲染收據(jù)章 drawingChapter(r, c, ctx, position) {let fees = $that.printPayFeeNewInfo.fees //費(fèi)用項(xiàng)let feeLength = Number(fees.length) //費(fèi)用項(xiàng)長(zhǎng)度，用于渲染行數(shù)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// 已經(jīng)加載完成的直接渲染ctx.drawImage(img, position.start_c + 10, position.start_r, width, 80);} }

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。