luckysheet的使用——17.将表格作为pdf下载到本地

luckysheet源码里面自带有打印按钮，但是功能是无法使用的，所以我把该功能重写了一遍

1.在menuButton.js文件中找到源码打印按钮的触发事件：

$("#luckysheet-icon-print").click(function () {}

2.使用自己写的挂载方法

window.printExcel()

3.在自己的前端项目中，将printExcel挂载上去

window.printExcel = this.printExcel

4.编写我们的导出pdf方法

printExcel(){		// 手动实现全选选区，这样打印pdf才可以将滚动条没有展示的内容也一起打印$('#luckysheet-left-top').click();//获取画布元素let sourceCanvas = document.getElementById('luckysheetTableContent')// 调用luckysheet提供的api，获取选区的截图数据let imgData = window.luckysheet.getScreenshot();// 目标DPI (例如300 DPI)const targetDPI = 300;// 计算从像素到毫米的转换因子 (1 inch = 25.4 mm, 默认屏幕分辨率为96 DPI)const dpiConversionFactor = targetDPI / 96; // 如果目标是300 DPI，则转换因子约为3.125// 将canvas的宽高按目标DPI转换为毫米const pdfWidthMM = (sourceCanvas.width * 25.4) / targetDPI;const pdfHeightMM = (sourceCanvas.height * 25.4) / targetDPI;// 创建 jsPDF 实例const pdf = new jsPDF({orientation: sourceCanvas.width > sourceCanvas.height ? 'l' : 'p', // 根据宽高决定方向unit: 'mm', // 使用毫米作为单位format: [pdfWidthMM * dpiConversionFactor, pdfHeightMM * dpiConversionFactor] // 设置页面尺寸});// 添加图片到 PDF 中，注意这里我们需要根据之前设置的 PDF 页面尺寸来调整图片尺寸// 使用 getEffectivePageSize 来获取实际页面尺寸，因为可能会受到边距等影响const effectivePageWidth = pdf.internal.pageSize.getWidth();const effectivePageHeight = pdf.internal.pageSize.getHeight();//插入luckysheet内容pdf.addImage(imgData, 'PNG', 0, 0, effectivePageWidth, effectivePageHeight);// 保存 PDF 文档pdf.save( "导出.pdf");
}

这里我们需要先安装jsPdf，使用命令行安装

npm install jspdf --save

然后在指定页面引入

import {jsPDF} from "jspdf";