[绍棠] Vue 导出pdf（最后：针对多个部分下载到同一个pdf中的处理办法）

最新推荐文章于 2025-06-20 09:18:40 发布

绍棠

最新推荐文章于 2025-06-20 09:18:40 发布

阅读量419

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： vue.js html5 前端

本文链接：https://blog.csdn.net/happyshaotang2/article/details/121702256

本文介绍了在Vue项目中导出PDF的两种方法：html2canvas+jspdf与window.print()。针对html2canvas导出的PDF清晰度问题，提出了拼接DOM下载的解决方案。另一种方法利用window.print()，通过动态创建iframe避免影响Vue页面，实现打印后无须刷新的PDF下载。

基本上是如下两种：

1.使用 html2Canvas + jsPDF  导出PDF， 这种方式什么都好，就是下载的pdf太模糊了。对要求好的pdf这种方式真是不行啊！

2.调用浏览器自身的方法。window.print() 来打印（打印时可选下载），这种方式打印出来很清楚，但纯在浏览器兼容问题。
 谷歌浏览器比较好用点。

两种导出pdf清晰度对比：

--------------第一张图 html2canvas + jspdf；-----------------------------------------------第二张图 window.print() 浏览器方式------------

方式一:html2canvas+jspdf

html2Canvas + jsPDF 导出普遍存在一个问题就是不太清楚的问题。目前我没有在网上找到合适这种方式打印出清晰的PDF解决方案。

如果不是要求太高的这种方式还是可以用的。

这种方式实现的方法：

首先npm 下载两插件

npm i html2canvas jspdf --save-dev

在.vue文件中定义要到导出 DOM 元素

<template>
    <div class="pdf-demo">

        <button @click="handleDown">jsPDF方式下载</button>
        <button @click="handleWindowPrint( '#demo', '电子合同' )">浏览器方式下载</button>

        <div id="demo" >
                #demo 中的内容导出成 PDF
        </div>

    </div>
</template>

然后创建一个 htmlToPdf.js 文件，内容如下：

import html2canvas from 'html2canvas';
import JsPDF from 'jspdf';

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

function downloadPDF(ele, pdfName){

    let eleW = ele.offsetWidth;// 获得该容器的宽
    let el