vue项目中导出为pdf格式的

最新推荐文章于 2023-05-18 11:12:01 发布

南风过境~

最新推荐文章于 2023-05-18 11:12:01 发布

阅读量1.7k

点赞数 3

分类专栏：项目中遇到的问题

本文链接：https://blog.csdn.net/qq_43688916/article/details/103699495

版权

本文介绍了使用html2Canvas和jsPDF在Vue项目中将页面内容导出为PDF的方法，尽管存在图像模糊的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html2Canvas + jsPDF 导出PDF，缺点就是模糊
1、下载插件

npm i html2canvas  --save-dev
npm i jspdf--save-dev

2、创建一个新的文件

import html2canvas from 'html2canvas';
import JsPDF from 'jspdf';
/**
 * @param  ele          要生成 pdf 的DOM元素（容器）
 * @param  padfName     PDF文件生成后的文件名字
 * */
function downloadPDF(ele, pdfName){
    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

最低0.47元/天解锁文章