HTML页面转PDF导出加水印并解决字被截断的问题

最新推荐文章于 2025-06-04 14:16:01 发布

原创

最新推荐文章于 2025-06-04 14:16:01 发布 · 7.4k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#转PDF #canvas图片跨域 #PDF截取不全

项目需求是将HTML页面导出为清晰的PDF文件，过程中遇到字被截断和canvas图片跨域问题。通过html2canvas和jspdf库实现转换，通过调整canvas大小解决清晰度问题。对于字被截断，提出了固定内容时预估每页高度和动态内容时判断换页位置的解决方案。对于canvas图片跨域，介绍了设置允许跨域属性、添加时间戳以及转换为base64的方法，但存在兼容性问题，推荐服务端导出PDF。

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

项目需求：根据HTML页面导出完整的PDF

技术栈： html2canvas 、 jspdf 、 Vue

首先将包下载到项目中，然后在制定页面引入依赖包


import html2Canvas from "html2canvas";

import JsPDF from "jspdf";

定义一个ID为pdfDom的HTML节点，也就是你想导出的那部分


<div class="right" id="pdfDom">这是PDF的内容<div>
<img src="" alt="" v-show="false" id="waterMarkImg">      //  图片水印的dom元素

首先页面会被转化为canvas，然后生成图片后导出PDF文件，那生成canvas的时候会出现不清晰的问题，那就将canvas的画布增大两倍，然后在转成PDF的时候再缩小，清晰度就会变高。

接下来在导出按钮上绑定事件，在点击事件里粘贴如下代码

let title = this.articleInfo.title;       // 设置导出PDF的文件名

var element = document.getElementById("pdfDom");      // 获取需要导出的DOM节点

var shareContent = element; //需要截图的包裹的（原生的）DOM 对象

var width = shareContent.offsetWidth; //获取dom 宽度

var height = shareContent.offsetHeight; //获取dom 高度

var canvas = document.createElement("canvas"); //创建一个canvas节点

var scale = 2; //定义任意放大倍数 支持小数

canvas.width = width * scale;

canvas.height = height * scale;

canvas.get