43、vue导出pdf文件,并解决滚动条外内容无法获取的问题

使用插件html2canvas和jspdf插件

下载完两个插件后引入所需要的页面
javascript 复制代码
import html2canvas from "html2canvas"
import jsPDF from "jspdf"

1、在导出之前将元素的高度或者宽度设置为滚动高度或者宽度,如:

javascript 复制代码
el.style.height = el.scrollHeight + 'px';//把要导出的元素高度设置为滚动高度

2、转为图片之后再将高度/宽度设回来

javascript 复制代码
//下载完成后改变浏览器界面可视区域高度
el.style.height = el.clientHeight+ 'px'

以下导出pdf方法

javascript 复制代码
// 导出页面为PDF格式---使用插件html2canvas和jspdf插件
export function exportPDF(titleName, id) {
    document.body.scrollTop = document.documentElement.scrollTop = 0;
    let el = document.querySelector("#my_table_1");
    var clientH = el.clientHeight;
    el.style.height = el.scrollHeight + 'px';//把要导出的元素高度设置为滚动高度
    html2canvas(el, {
        allowTaint: true,
        useCORS: true,
        dpi: 120, // 图片清晰度问题
        background: "#142D42", //如果指定的div没有设置背景色会默认成黑色,这里是个坑
        y: 0
    }).then((canvas) => {
        var currentPage = 1;
        //未生成pdf的html页面高度
        var leftHeight = canvas.height;
        var a4Width = 576;
        var a4Height = 772.89; //A4大小,210mm x 297mm,四边各保留10mm的边距,显示区域190x277
        //一页pdf显示html页面生成的canvas高度;
        var a4HeightRef = Math.floor((canvas.width / a4Width) * a4Height);
        //pdf页面偏移
        var position = 0;
        var pageData = canvas.toDataURL("image/jpeg", 1.0);
        var pdf = new jsPDF("p", "pt", "a4"); //A4纸,纵向
        pdf.addFont('simkai-normal.ttf', 'simkai', 'normal')
        pdf.setFont('simkai')
        pdf.setFontSize(20)
        var index = 1,
            canvas1 = document.createElement("canvas"),
            height;
        pdf.setDisplayMode("fullwidth", "continuous", "FullScreen");
        function createImpl(canvas) {
            if (leftHeight > 0) {
                index++;
                var checkCount = 0;
                if (leftHeight > a4HeightRef) {
                    var i = position + a4HeightRef;
                    for (i = position + a4HeightRef; i >= position; i--) {
                        var isWrite = true;
                        for (var j = 0; j < canvas.width; j++) {
                            var c = canvas
                                .getContext("2d")
                                .getImageData(j, i, 1, 1).data;
                            if (c[0] != 0xff || c[1] != 0xff || c[2] != 0xff) {
                                isWrite = false;
                                break;
                            }
                        }
                        if (isWrite) {
                            checkCount++;
                            if (checkCount >= 10) {
                                break;
                            }
                        } else {
                            checkCount = 0;
                        }
                    }
                    height =
                        Math.round(i - position) || Math.min(leftHeight, a4HeightRef);
                    if (height <= 0) {
                        height = a4HeightRef;
                    }
                } else {
                    height = leftHeight;
                }
                canvas1.width = canvas.width;
                canvas1.height = height;
                var ctx = canvas1.getContext("2d");
                ctx.drawImage(
                    canvas,
                    0,
                    position,
                    canvas.width,
                    height,
                    0,
                    0,
                    canvas.width,
                    height
                );
                var pageHeight = Math.round((a4Width / canvas.width) * height);
                if (position != 0) {
                    pdf.addPage();
                }
                pdf.addImage(
                    canvas1.toDataURL("image/jpeg", 1.0),
                    "JPEG",
                    10,
                    40,
                    a4Width,
                    (a4Width / canvas1.width) * height
                );
                leftHeight -= height;
                position += height;
                if (leftHeight > 0) {
                    setTimeout(createImpl, 500, canvas);
                } else {
                    pdf.save(titleName + ".pdf");
                    //下载完成后改变浏览器界面可视区域高度
                    el.style.height = clientH + 'px'

                }
            }
        }
        let targetPage = pdf.internal.getNumberOfPages();
        //当内容未超过pdf一页显示的范围,无需分页
        if (leftHeight < a4HeightRef) {
            pdf.addImage(
                pageData,
                "JPEG",
                10,
                40,
                a4Width,
                (a4Width / canvas.width) * leftHeight
            );
            pdf.save(titleName + ".pdf");
            //下载完成后改变浏览器界面可视区域高度
            el.style.height = clientH + 'px'
        } else {
            try {
                pdf.deletePage(0);
                setTimeout(createImpl, 500, canvas);
            } catch (err) {
            }
        }
    })
}

vue页面使用

javascript 复制代码
//导出pdf------ 数据统计汇总为导出文件名称;my_table_1为要导出的dom元素id
        exportData(){
            exportPDF("数据统计汇总",'my_table_1');
        },
相关推荐
dy17172 小时前
element-plus表格默认展开有子的数据
前端·javascript·vue.js
CodeCraft Studio5 小时前
PDF处理控件Aspose.PDF教程:使用 Python 将 PDF 转换为 Base64
开发语言·python·pdf·base64·aspose·aspose.pdf
2501_915918416 小时前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
程序员的世界你不懂6 小时前
【Flask】测试平台开发,新增说明书编写和展示功能 第二十三篇
java·前端·数据库
索迪迈科技6 小时前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
Light606 小时前
领码方案|Linux 下 PLT → PDF 转换服务超级完整版:异步、权限、进度
linux·pdf·可观测性·异步队列·plt转pdf·权限治理·进度查询
ftswsfb6 小时前
PDF文件基础-计算机字体
pdf
gnip7 小时前
JavaScript二叉树相关概念
前端
attitude.x7 小时前
PyTorch 动态图的灵活性与实用技巧
前端·人工智能·深度学习
β添砖java7 小时前
CSS3核心技术
前端·css·css3