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

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";
相关推荐
用户40812812003811 分钟前
音频格式
前端
胡gh1 分钟前
React组件实用,每个组件各司其职,成为信息管理大师
前端·react.js
namehu1 分钟前
从 ESLint 到 Oxlint:一次提速百倍的前端 Lint 工具链升级实战
前端·javascript·eslint
凯心3 分钟前
前端学习 vben 之 axios interceptors
前端·javascript
sophie旭4 分钟前
《深入浅出react》总结之 10.2 渲染阶段流程探秘-completeWork
前端·react.js·源码
拾光拾趣录4 分钟前
单点登录(SSO):实现跨系统无缝访问
前端·后端
程序员老廖6 分钟前
Markdown 功能支持测试文档
前端
挽淚7 分钟前
防抖与节流:前端开发中的高频事件优化
javascript
Mintopia9 分钟前
当像素学会游泳:流体模拟的奇妙旅程
前端·javascript·计算机图形学
程序员厉飞雨13 分钟前
Gradle 缓存优化
前端·架构