luckysheet实现打印功能

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实现打印功能相关推荐

MIS开发中.net Framework的打印功能
Microsoft .net Framework的打印功能都以组件的方式提供,为程序员提供了很大的方便,但是这几个组件的使用还是很复杂的,有必要解释一下. 打印操作通常包括以下四个功能 1 打印设置 ...
window.print()前端实现打印功能
方法介绍 window.print()方法用于打印当前窗口的内容. 默认打印页面中body里的所有内容. 调用 print() 方法会产生一个打印预览弹框,让用户可以设置打印配置. 1. 打印方法 1 ...
php可以打印一个页面,利用html实现分页打印功能的实例详解
本篇介绍利用html实现分页打印功能的实例详解,有些不想打印出来的分页打印的都可以应用这类样式进行控制在非打印时是无效的. 页面打印 /* 应用这个样式的在打印时隐藏 */ .noPrint { d ...
开源的javascript实现页面打印功能，兼容所有的浏览器（情况属实）
这篇文章完全是属于技术文章,也是记录一下自己在项目当中遇到的坑爹问题啊,因为是B/S的程序,所以打印功能还是必须要有的,对于打印我选择了一个js插件,发现非常的简单和方便,所以这里拿出来和大家分享一下 ...
DevExpress打印功能 z
一.打印功能说明: 打印功能,我们有多种实现方式,可以根据需要自行选择,我简单的总结下两种方法. (1).使用微软.net框架自带的PrintDocument,这种方式是直接借助Graphics,自行 ...
在该系统上全局禁用了虚拟打印功能，不会为该虚拟机启用此功能--解决办法
问题描述:在开启此虚拟机时,提示在该系统上全局禁用了虚拟打印功能,不会为该虚拟机启用此功能. 解决办法:在VMware workstation页面依次点击编辑--首选项--设备--启用虚拟机打印-- ...
java发布后功能不能用,急项目发布后java写的打印功能失效了-求解解决方法
当前位置:我的异常网» J2EE » 急项目发布后java写的打印功能失效了-求解解决方法急项目发布后java写的打印功能失效了-求解解决方法 www.myexceptions.net 网友分享于 ...
lodop打印不显示页码_Lodop插件实现打印功能
下载lodop插件实现打印功能(element-ui框架) 一.vuejs弹窗部分 <el-dialog title="打印" width="960px" ...
boost::describe模块实现打印功能的测试程序
boost::describe模块实现打印功能的测试程序实现功能 C++实现代码实现功能 boost::describe模块实现打印功能的测试程序 C++实现代码 #include <boo ...
NET快速信息化系统开发框架 V3.2 - “用户管理”主界面使用多表头展示、增加打印功能...
NET快速信息化系统开发框架 V3.2 -> "用户管理"主界面使用多表头展示.增加打印功能 RDIFrameowrk.NET 用户管理是使用非常频繁的模块,由于需要展示的字 ...

luckysheet实现打印功能

luckysheet实现打印功能相关推荐

最新文章

热门文章