网页vue3导出pdf

需求:统计页面导出pdf;

利用插件:html2canvas和jspdf库;

原理就是:我们把需要转换的元素【例如一个div元素】使用html2canvas库将它转换为一个canvas对象,使用jspdf库创建PDF文档,用addImage方法将图像添加到PDF文件中 最后使用save方法将PDF文件保存到用户的设备上。

jsPDF
html2canvas

废话不多说 上代码

在utils下新建文件 htmlToPdf.ts

typescript 复制代码
/* 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, //按比例增加分辨率// 提升画面质量,但是会增加文件大小
      // 需要注意,高度 宽度一定要在这里定义一下,不然会存在只下载了当前你能看到的页面!!!
      // height: document.getElementById('pdfDom').scrollHeight,
      // windowHeight: document.getElementById('pdfDom').scrollHeight,
      height: 2700,
      windowHeight: 2700
    }).then(canvas => {
      const pdf = new jsPDF('p', 'mm', 'a4'); //A4纸,纵向
      const ctx = canvas.getContext('2d'),
        a4w = 210,
        a4h = 297, //A4大小,210mm x 297mm
        imgHeight = Math.floor((a4h * canvas.width) / a4w); //按A4显示比例换算一页图像的像素高度
      let renderedHeight = 0;

      while (renderedHeight < canvas.height) {
        const page = document.createElement('canvas');
        page.width = canvas.width;
        page.height = Math.min(imgHeight, canvas.height - renderedHeight); //可能内容不足一页

        //用getImageData剪裁指定区域,并画到前面创建的canvas对象中
        (page.getContext('2d') as any).putImageData(
          ctx?.getImageData(0, renderedHeight, canvas.width, Math.min(imgHeight, canvas.height - renderedHeight)),
          0,
          0
        );
        pdf.addImage(
          page.toDataURL('image/jpeg', 1.0),
          'JPEG',
          0,
          0,
          a4w,
          Math.min(a4h, (a4w * page.height) / page.width)
        ); //添加图像到页面,保留10mm边距

        renderedHeight += imgHeight;
        if (renderedHeight < canvas.height) {
          pdf.addPage(); //如果后面还有内容,添加一个空页
        }
        // delete page;
      }
      pdf.save(title + '.pdf');
    });
  }
};

export default htmlToPdf;

在使用的地方

typescript 复制代码
import htmlToPdf from '@/utils/htmlToPdf';


const exportPDF = () => {
  // eslint-disable-next-line spellcheck/spell-checker
  htmlToPdf.getPdf('离缝报告', '#pdfDom');
};

参考文档

相关推荐
开开心心就好3 分钟前
免费PDF处理软件,支持多种操作
运维·服务器·前端·spring boot·智能手机·pdf·电脑
markyankee1013 小时前
Vue 响应式系统全面解析:从基础到高级实践
vue.js
念九_ysl4 小时前
Java 使用 OpenHTMLToPDF + Batik 将含 SVG 遮罩的 HTML 转为 PDF 的完整实践
java·开发语言·pdf
翻滚吧键盘5 小时前
{{ }}和v-on:click
前端·vue.js
上单带刀不带妹5 小时前
手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程
开发语言·前端·javascript·vue.js·前端框架
Q_970956396 小时前
java+vue+SpringBoo校园失物招领网站(程序+数据库+报告+部署教程+答辩指导)
java·数据库·vue.js
翻滚吧键盘7 小时前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js
叹一曲当时只道是寻常7 小时前
vue中添加原生右键菜单
javascript·vue.js
markyankee10110 小时前
Vue.js 入门指南:从零开始构建你的第一个应用
vue.js
khalil10 小时前
基于 Vue3实现一款简历生成工具
前端·vue.js