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

眼镜chen2025-05-21 10:38

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

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

bash 复制代码

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

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

bash 复制代码

window.printExcel()

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

bash 复制代码

window.printExcel = this.printExcel

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

bash 复制代码

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，使用命令行安装

bash 复制代码

npm install jspdf --save

然后在指定页面引入

bash 复制代码

import {jsPDF} from "jspdf";