vue3+ElementUI html导出Pdf方式

更新时间：2026年03月10日 09:17:52 作者：风随心飞飞

文章介绍了如何使用html2canvas和jspdf两个依赖生成PDF文件,并在Vue项目中应用,通过将PDF转换为base64Url,可以方便地进行上传和下载操作

1. 安装依赖

主要用到以下两个依赖：

html2canvas：通过获取HTML的某个元素，然后生成Canvas，能让用户保存为图片。
jspdf：基于HTML5的客户端解决方案，用于生成各种用途的 PDF 文档。

npm i html2canvas jspdf --save

package.json

"dependencies": {
    "html2canvas": "^1.4.1",
    "jspdf": "^2.5.1",
    "vue": "^3.2.37"
  }

2. 创建htmlToPdf.js

/* eslint-disable */
//不使用JQuery版的
import html2canvas from 'html2canvas';
import JsPDF from 'jspdf';

/**
 * @param  ele          要生成 pdf 的DOM元素（容器）
 * @param  padfName     PDF文件生成后的文件名字
 * */


function js_getDPI() {
    var arrDPI = new Array();
    if (window.screen.deviceXDPI != undefined) {
        arrDPI[0] = window.screen.deviceXDPI;
        arrDPI[1] = window.screen.deviceYDPI;
    }
    else {
        var tmpNode = document.createElement("DIV");
        tmpNode.style.cssText = "width:1in;height:1in;position:absolute;left:0px;top:0px;z-index:99;visibility:hidden";
        document.body.appendChild(tmpNode);
        arrDPI[0] = parseInt(tmpNode.offsetWidth);
        arrDPI[1] = parseInt(tmpNode.offsetHeight);
        tmpNode.parentNode.removeChild(tmpNode);
    }
    return arrDPI;
}


export function getPdfUrl(ele, pdfName,callback){

    let eleW = ele.offsetWidth;// 获得该容器的宽
    let eleH = ele.offsetHeight;// 获得该容器的高
    let eleOffsetTop = ele.offsetTop;  // 获得该容器到文档顶部的距离
    let eleOffsetLeft = ele.offsetLeft; // 获得该容器到文档最左的距离

    var canvas = document.createElement("canvas");
    var abs = 0;

    let win_in = document.documentElement.clientWidth || document.body.clientWidth; // 获得当前可视窗口的宽度（不包含滚动条）
    let win_out = window.innerWidth; // 获得当前窗口的宽度（包含滚动条）

    if(win_out>win_in){
        // abs = (win_o - win_i)/2;    // 获得滚动条长度的一半
        abs = (win_out - win_in)/2;    // 获得滚动条宽度的一半
    }
    canvas.width = eleW * 2;    // 将画布宽&&高放大两倍
    canvas.height = eleH * 2;

    var context = canvas.getContext("2d");
    context.scale(2, 2);
    context.translate(-eleOffsetLeft -abs, -eleOffsetTop);
    // 这里默认横向没有滚动条的情况，因为offset.left(),有无滚动条的时候存在差值，因此
    // translate的时候，要把这个差值去掉

    // html2canvas(element).then( (canvas)=>{ //报错
    // html2canvas(element[0]).then( (canvas)=>{




    html2canvas( ele, {
        // dpi: 300,
        width:eleW+135,
        height:eleH,
        // allowTaint: true,  //允许 canvas 污染， allowTaint参数要去掉，否则是无法通过toDataURL导出canvas数据的
        useCORS:true  //允许canvas画布内 可以跨域请求外部链接图片, 允许跨域请求。
    } ).then( (canvas)=>{
        var contentWidth = canvas.width;
        var contentHeight = canvas.height;
        //一页pdf显示html页面生成的canvas高度;
        var pageHeight = contentWidth / 592.28 * 841.89;
        //未生成pdf的html页面高度
        var leftHeight = contentHeight;
        //页面偏移
        var position = 30;
        //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
        var imgWidth = 595.28;
        var imgHeight = 595.28/contentWidth * contentHeight;
        var pageData = canvas.toDataURL('image/jpeg', 1.0);
        var pdf = new JsPDF('', 'pt', 'a4');
        //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
        //当内容未超过pdf一页显示的范围，无需分页
        if (leftHeight < pageHeight) {
            //在pdf.addImage(pageData, 'JPEG', 左，上，宽度，高度)设置在pdf中显示；
            pdf.addImage(pageData, 'JPEG', 30, 30, imgWidth, imgHeight);
            // pdf.addImage(pageData, 'JPEG', 20, 40, imgWidth, imgHeight);
        } else {    // 分页
            while(leftHeight > 0) {
                pdf.addImage(pageData, 'JPEG', 30, position, imgWidth, imgHeight);
                leftHeight -= pageHeight;
                position -= 841.89;
                //避免添加空白页
                if(leftHeight > 0) {
                    pdf.addPage();
                }
            }
        }
        //可动态生成
        // pdf.save(pdfName);

        var buffer = pdf.output("datauristring");
        callback(buffer)
    })
}


export function downloadPDF2(ele, pdfName,callback){

    let eleW = ele.offsetWidth;// 获得该容器的宽
    let eleH = ele.offsetHeight;// 获得该容器的高
    let eleOffsetTop = ele.offsetTop;  // 获得该容器到文档顶部的距离
    let eleOffsetLeft = ele.offsetLeft; // 获得该容器到文档最左的距离

    var canvas = document.createElement("canvas");
    var abs = 0;

    let win_in = document.documentElement.clientWidth || document.body.clientWidth; // 获得当前可视窗口的宽度（不包含滚动条）
    let win_out = window.innerWidth; // 获得当前窗口的宽度（包含滚动条）

    if(win_out>win_in){
        // abs = (win_o - win_i)/2;    // 获得滚动条长度的一半
        abs = (win_out - win_in)/2;    // 获得滚动条宽度的一半
        // console.log(a, '新abs');
    }
    canvas.width = eleW * 2;    // 将画布宽&&高放大两倍
    canvas.height = eleH * 2;

    var context = canvas.getContext("2d");
    // context.scale(2, 2);
    context.translate(-eleOffsetLeft -abs, -eleOffsetTop);
    // 这里默认横向没有滚动条的情况，因为offset.left(),有无滚动条的时候存在差值，因此
    // translate的时候，要把这个差值去掉

    // html2canvas(element).then( (canvas)=>{ //报错
    // html2canvas(element[0]).then( (canvas)=>{



    html2canvas( ele, {
        // dpi: 300,
        width:eleW+135,
        height:eleH,
        // allowTaint: true,  //允许 canvas 污染， allowTaint参数要去掉，否则是无法通过toDataURL导出canvas数据的
        useCORS:true  //允许canvas画布内 可以跨域请求外部链接图片, 允许跨域请求。
    } ).then( (canvas)=>{
        var contentWidth = canvas.width;
        var contentHeight = canvas.height;
        //一页pdf显示html页面生成的canvas高度;
        var pageHeight = contentWidth / 592.28 * 841.89;
        //未生成pdf的html页面高度
        var leftHeight = contentHeight;
        //页面偏移
        var position = 30;
        //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
        var imgWidth = 595.28;
        var imgHeight = 595.28/contentWidth * contentHeight;
        var pageData = canvas.toDataURL('image/jpeg', 1.0);
        var pdf = new JsPDF('', 'pt', 'a4');
        //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
        //当内容未超过pdf一页显示的范围，无需分页
        if (leftHeight < pageHeight) {
            //在pdf.addImage(pageData, 'JPEG', 左，上，宽度，高度)设置在pdf中显示；
            pdf.addImage(pageData, 'JPEG', 30, 30, imgWidth, imgHeight);
            // pdf.addImage(pageData, 'JPEG', 20, 40, imgWidth, imgHeight);
        } else {    // 分页
            while(leftHeight > 0) {
                pdf.addImage(pageData, 'JPEG', 30, position, imgWidth, imgHeight);
                leftHeight -= pageHeight;
                position -= 841.89;
                //避免添加空白页
                if(leftHeight > 0) {
                    pdf.addPage();
                }
            }
        }
        //可动态生成
        pdf.save(pdfName + '.pdf');
        callback()
    })
}

3. 如何使用htmlToPdf.js

App.vue为例，这样就得到了pdf-con范围内的PDF的base64Url, 可以转成file对象去做上传，提交给后端参数

调用此方法后浏览器就会直接下载PDF

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

elementUI+Springboot实现导出excel功能的全过程
这篇文章主要介绍了elementUI+Springboot实现导出excel功能,现在也对这个导出功能进行一个汇总整理写出来，结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-09-09
基于vue1和vue2获取dom元素的方法
下面小编就为大家分享一篇基于vue1和vue2获取dom元素的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-03-03
vue3 canvas选择器Canvas增加页面性能方式
本文介绍了使用Vue3CompositionAPI和Canvas实现的交互式选择器组件,支持PC端和移动端的拖动选择、多选和取消选择功能
2026-05-05
vue3中的数据劫持的最新实现方案的proxy示例详解
Vue3中使用Proxy实现数据劫持,解决了Vue2中数组和对象劫持的遗留问题,Proxy可以修改某些操作的默认行为,通过get和set方法实现数据的劫持和保护机制,感兴趣的朋友跟随小编一起看看吧
2024-11-11
Vue2和Vue3的nextTick实现原理
Vue 中的数据绑定和模板渲染都是异步的，那么如何在更新完成后执行回调函数呢？这就需要用到 Vue 的 nextTick 方法了，本文详细介绍了Vue2和Vue3的nextTick实现原理，感兴趣的同学可以参考一下
2023-04-04
Vue 父子组件的数据传递、修改和更新方法
下面小编就为大家分享一篇Vue 父子组件的数据传递、修改和更新方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-03-03
Vue实现父子组件传值其实不难
这篇文章主要介绍了Vue实现父子组件传值其实不难问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-03-03
vite.config.js本地配置获取真实请求地址详解
vite.config.ts是Vite项目的配置文件,用于配置的构建、开发和部署等参数,这篇文章主要介绍了vite.config.js本地配置获取真实请求地址的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
2025-08-08
vue 监听屏幕高度的实例
今天小编就为大家分享一篇vue 监听屏幕高度的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
vue项目刷新当前页面的三种方式(重载当前页面数据)
这篇文章主要介绍了vue项目刷新当前页面的三种方式(重载当前页面数据),本文结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-01-01

vue3+ElementUI html导出Pdf方式

目录

1. 安装依赖

2. 创建htmlToPdf.js

3. 如何使用htmlToPdf.js

总结

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具