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";
相关推荐
LuciferHuang7 小时前
震惊!三万star开源项目竟有致命Bug?
前端·javascript·debug
GISer_Jing7 小时前
前端实习总结——案例与大纲
前端·javascript
天天进步20157 小时前
前端工程化:Webpack从入门到精通
前端·webpack·node.js
姑苏洛言8 小时前
编写产品需求文档:黄历日历小程序
前端·javascript·后端
知识分享小能手8 小时前
Vue3 学习教程,从入门到精通,使用 VSCode 开发 Vue3 的详细指南(3)
前端·javascript·vue.js·学习·前端框架·vue·vue3
姑苏洛言8 小时前
搭建一款结合传统黄历功能的日历小程序
前端·javascript·后端
hackchen9 小时前
Go与JS无缝协作:Goja引擎实战之错误处理最佳实践
开发语言·javascript·golang
redreamSo9 小时前
AI 绘图效率神器:Mermaid Previewer Sidebar Chrome 插件
chrome·langchain·aigc
你的人类朋友10 小时前
🤔什么时候用BFF架构?
前端·javascript·后端