【vue】vue3导出网页pdf

xiaaaa.z

已于 2024-09-04 14:22:58 修改

阅读量921

点赞数 3

分类专栏： vue 文章标签： pdf vue.js

于 2024-04-18 12:16:12 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_43957384/article/details/137915528

版权

本文介绍了如何使用html2canvas库将HTML元素转换为canvas对象，然后结合jspdf库生成PDF文件，详细展示了如何处理图片尺寸和页面布局，最终实现将网页内容导出为PDF的功能。

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

需求：统计页面导出pdf；
利用插件：html2canvas和jspdf库；
原理就是：我们把需要转换的元素【例如一个div元素】使用html2canvas库将它转换为一个canvas对象，使用jspdf库创建PDF文档，用addImage方法将图像添加到PDF文件中最后使用save方法将PDF文件保存到用户的设备上。

jsPDF
html2canvas
废话不多说上代码
在utils下新建文件 htmlToPdf.ts

/* eslint-disable spellcheck/spell-checker */
// 页面导出为pdf格式
import html2Canvas from 'html2canvas';
import jsPDF from 'jspdf';

const htmlToPdf = {
   
  getPdf(title: string, id: any) {
   
    html2Canvas(document.querySelector(id), {
   
      allowTaint: false,
      logging: false,
      useCORS: true,
      scale: 4, //按比例增加分辨率// 提升画面质量，但是会增加文件大小