1.vue 转 PDF

在 Vue 项目中将 HTML 页面转换为 PDF 文件是一个常见需求，特别是在需要生成报告或打印页面时。本文将介绍如何使用 html2canvas 和 jspdf 库实现这一功能。

2.安装依赖

首先，我们需要安装两个库：html2canvas 和 jspdf 。可以使用以下命令安装：

npm install html2canvas
npm install jspdf --save

3.创建转换函数

在 utils 文件夹下创建一个 htmlToPdf.js 文件，并编写以下代码：

import html2Canvas from 'html2canvas';
import jsPDF from 'jspdf';const htmlToPdf = {
getPdf(title) {
html2Canvas(document.querySelector('#pdfDom'), {//这里pdfDom就是你打印/下载页面区域的div的id
allowTaint: false,
taintTest: false,
logging: false,
useCORS: true,
dpi: window.devicePixelRatio * 4, // 提高分辨率
scale: 4 // 按比例增加分辨率
}).then(canvas => {
const pdf = new jsPDF('p', 'mm', 'a4'); // A4 纸，纵向
const ctx = canvas.getContext('2d');
const a4w = 190, a4h = 277; // A4 大小，四边各保留 10mm 边距
const imgHeight = Math.floor(a4h * canvas.width / a4w);
let renderedHeight = 0;while (renderedHeight < canvas.height) {
const page = document.createElement('canvas');
page.width = canvas.width;
page.height = Math.min(imgHeight, canvas.height - renderedHeight);
page.getContext('2d').putImageData(ctx.getImageData(0, renderedHeight, canvas.width, Math.min(imgHeight, canvas.height - renderedHeight)), 0, 0);
pdf.addImage(page.toDataURL('image/jpeg', 1.0), 'JPEG', 10, 10, a4w, Math.min(a4h, a4w * page.height / page.width));
renderedHeight += imgHeight;
if (renderedHeight < canvas.height) {
pdf.addPage();
}
}
pdf.save(title + '.pdf');    //这里title可以改为你下载pdf文件时的默认文件名
});
}
};export default htmlToPdf;

4.在vue组件中使用

在需要生成 PDF 的 Vue 组件中，引用并使用上述函数。首先，在组件中引入 htmlToPdf ：

import htmlToPdf from '@/utils/htmlToPdf';

然后，在模板中添加一个包含需要转换内容的 div，并设置一个按钮来触发 PDF 生成：

<div id="pdfDom">    这里的 id 要和 htmlToPdf 函数中你写的id保持一致
<!-- 这里是你需要打印/转为pdf文件下载的页面内容 -->
</div>
<div class="preview-content-operateBtn">
<button class="previewBtn" @click="onClickDownLoad">下载 PDF 简历</button>
</div>

在按钮的点击方法中调用 htmlToPdf.getPdf 函数：

methods: {    //这里以vue2的选项式代码示例onClickDownLoad() {htmlToPdf.getPdf('下载名称');}
}

解决常见问题：

1. 模糊问题：通过放大 canvas 尺寸和调整 DPI 来解决。

2. 页边距问题：在生成 PDF 时预留页边距。

3. 跨域图片问题：将图片转换为 base64 格式，避免跨域错误。

通过以上步骤，我们可以在 Vue 项目中轻松实现 HTML 转 PDF 的功能，并解决常见的模糊、页边距和跨域图片问题。

本文仅供个人学习使用记录