前端黑科技:一键将网页变 PDF，so easy!
在数字化办公时代，PDF以其跨平台、易于打印和分享等优点，成为了文档格式的首选。而今天，我们要学习一项超实用的前端黑科技，无需任何插件，就能将网页内容转化为PDF并下载，轻松提升工作效率！
告别繁琐，三步实现PDF导出
- 引入JS库： 使用 jsPDF 和 html2canvas 这两个强大的JavaScript库，为PDF生成提供支持。
npm install jspdf html2canvas
- HTML代码： 创建一个按钮，用于触发PDF生成和下载功能。
- JavaScript代码： 编写 exportPDF 函数，利用 html2canvas 将HTML元素转换为 canvas，再使用 jsPDF 将 canvas 转换为 PDF 并下载。
import jsPDF from 'jspdf';
import html2canvas from 'html2canvas';
export default {
methods: {
async exportPDF() {
const element = document.getElementById('contentToConvert');
const canvas = await html2canvas(element);
const imgData = canvas.toDataURL('image/png');
const pdf = new jsPDF({
orientation: 'p', // 纵向
unit: 'mm', // 单位
format: 'a4' // 纸张大小
});
const imgWidth = 210; // A4纸宽度，单位mm
const pageHeight = 297; // A4纸高度，单位mm
let imgHeight = (canvas.height * imgWidth) / canvas.width;
let position = 0;
let pageData = '';
// 处理多页情况
if (imgHeight < pageheight pagedata='imgData;' else while imgheight> 0) {
pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight > pageHeight ? pageHeight : imgHeight);
imgHeight -= pageHeight;
position -= pageHeight;
if (imgHeight > 0) {
pdf.addPage();
}
}
}
// 添加图片到PDF
pdf.addImage(pageData, 'PNG', 0, 0, imgWidth, imgHeight>pageHeight?pageHeight:imgHeight);
// 保存PDF
pdf.save('download.pdf');
}
}
};
代码解析：
- 引入 jsPDF 和 html2canvas：
import jsPDF from 'jspdf';
import html2canvas from 'html2canvas';
这两行代码引入了 jsPDF 和 html2canvas 库，用于生成PDF和将HTML元素转换为 canvas。
- 获取目标元素：
const element = document.getElementById('contentToConvert');
这行代码获取了ID为 contentToConvert 的HTML元素，也就是我们需要转换为PDF的内容。
- 将HTML元素转换为Canvas：
const canvas = await html2canvas(element);
这行代码使用 html2canvas 将目标元素转换为 canvas 对象。
- 创建PDF对象：
const pdf = new jsPDF({
orientation: 'p', // 纵向
unit: 'mm', // 单位
format: 'a4' // 纸张大小
});
这行代码创建了一个新的 jsPDF 对象，并设置了PDF的页面方向、单位和纸张大小。
- 计算图片尺寸和位置：
const imgWidth = 210; // A4纸宽度，单位mm
const pageHeight = 297; // A4纸高度，单位mm
let imgHeight = (canvas.height * imgWidth) / canvas.width;
let position = 0;
let pageData = '';
这几行代码计算了要添加到PDF中的图片的宽度、高度和位置。
- 添加图片到PDF：
pdf.addImage(pageData, 'PNG', 0, 0, imgWidth, imgHeight>pageHeight?pageHeight:imgHeight);
这行代码将图片添加到PDF文档中。
- 保存PDF文件：
pdf.save('download.pdf');
这行代码将生成的PDF文件保存到本地，文件名为 download.pdf。
总结
通过以上步骤，我们就能轻松地将网页内容转换为PDF并下载。这项技术不仅可以用于生成各种报表和文档，还可以用于制作电子书、电子票据等，应用场景非常广泛，快来试试吧！