Vue3导出pdf文件详细方案

更新时间：2023年08月22日 14:39:43 作者：一只神奇的海螺

这篇文章主要给大家介绍了关于Vue3导出pdf文件的相关资料,最近项目有个需求,将系统统计的数据生成分析报告,然后可以导出成PDF,这里给大家总结下,需要的朋友可以参考下

Vue3导出pdf方案

1.引入两个依赖

npm i html2canvas
npm i jspdf

2.在utils文件夹下新建htmlToPdf.js文件

// 页面导出为pdf格式
import html2Canvas from 'html2canvas';
import jsPDF from 'jspdf';
const htmlToPdf = {
  getPdf(title, loading) {
    // loading = true;
    console.log(loading);
    html2Canvas(document.querySelector('#pdfDom'), {
      allowTaint: false,
      taintTest: false,
      logging: false,
      useCORS: true,
      dpi: window.devicePixelRatio * 4, //将分辨率提高到特定的DPI 提高四倍
      scale: 4, //按比例增加分辨率
    }).then((canvas) => {
      var pdf = new jsPDF('p', 'mm', 'a4'); //A4纸，纵向
      var ctx = canvas.getContext('2d'),
        a4w = 190,
        a4h = 272, //A4大小，210mm x 297mm，四边各保留10mm的边距，显示区域190x277
        imgHeight = Math.floor((a4h * canvas.width) / a4w), //按A4显示比例换算一页图像的像素高度
        renderedHeight = 0;
      while (renderedHeight < canvas.height) {
        var page = document.createElement('canvas');
        page.width = canvas.width;
        page.height = Math.min(imgHeight, canvas.height - renderedHeight); //可能内容不足一页
        //用getImageData剪裁指定区域，并画到前面创建的canvas对象中
        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),
        ); //添加图像到页面，保留10mm边距
        renderedHeight += imgHeight;
        if (renderedHeight < canvas.height) {
          pdf.addPage(); //如果后面还有内容，添加一个空页
        }
        // delete page;
      }
      //保存文件
      pdf.save(title + '.pdf');
      // loading = false;
      console.log(loading);
    });
  },
};
export default htmlToPdf;

扩展：还可以传多个不同容器id

// 页面导出为pdf格式
import html2Canvas from 'html2canvas';
import jsPDF from 'jspdf';
const htmlToPdf = {
  getPdf(title, id) {
    html2Canvas(
      document.querySelector(id), 
      {
        allowTaint: false,
        taintTest: false,
        logging: false,
        useCORS: true,
        dpi: window.devicePixelRatio * 4, //将分辨率提高到特定的DPI 提高四倍
        scale: 4, //按比例增加分辨率
      }
    ).then((canvas) => {
        var pdf = new jsPDF('p', 'mm', 'a4'); //A4纸，纵向
        var ctx = canvas.getContext('2d'),
        a4w = 190,
        a4h = 272, //A4大小，210mm x 297mm，四边各保留10mm的边距，显示区域190x277
        imgHeight = Math.floor((a4h * canvas.width) / a4w), //按A4显示比例换算一页图像的像素高度
        renderedHeight = 0;
      while (renderedHeight < canvas.height) {
        var page = document.createElement('canvas');
        page.width = canvas.width;
        page.height = Math.min(imgHeight, canvas.height - renderedHeight); //可能内容不足一页
        //用getImageData剪裁指定区域，并画到前面创建的canvas对象中
        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),
        ); //添加图像到页面，保留10mm边距
        renderedHeight += imgHeight;
        if (renderedHeight < canvas.height) {
          pdf.addPage(); //如果后面还有内容，添加一个空页
        }
        // delete page;
      }
    });
  },
};
export default htmlToPdf;

3.来到需要将vue转成pdf的页面

...
<!-- 按钮 -->
<el-button size="mini" type="primary" @click="pdfFunc" :loading="loading">
  转成pdf
</el-button>
...
<div id="pdfDom">
	<!-- 此处是希望转成pdf的部分的内容，用一个大div盒子包起来 -->
</div>
<script setup>
// 导入htmlToPdf.js
import htmlToPdf from '../utils/htmlToPdf';
// 可在methods定义
const pdfFunc = () => {   
	 loading.value = true;
	 // 调用htmlToPdf工具函数
     htmlToPdf.getPdf('文档名称');
     // 定时器模拟按钮loading动画的时间
      setTimeout(() => {
        loading.value = false;
        ElMessage.success('打印成功!');
      }, 1000);
}
</script>

methods:

    pdfFunc() {
      // 调用htmlToPdf工具函数
      htmlToPdf.getPdf('文档名称');
      // 定时器模拟按钮loading动画的时间
      setTimeout(() => {
      }, 1000);
    },

扩展:多个容器不同id

      // 容器id="pdfCompany"
      pdfFunc() {
        this.loadingFlag = true;	// 动画加载事件
        // 调用htmlToPdf工具函数
        htmlToPdf.getPdf('中小企业认定',"#pdfCompany");
        // 定时器模拟按钮loading动画的时间
        setTimeout(() => {
          this.loadingFlag = false;
        }, 1000);
      }

jsPdf

介绍一下纯jspdf用法，将一个图片列表导出为pdf文件，根据图片宽高计算在pdf中的位置

jsPDF 是一个基于 HTML5 的客户端解决方案，用于生成各种用途的 PDF 文档。

官网地址：https://rawgit.com/MrRio/jsPDF/master/docs/

1、安装：npm install jspdf

2、引入：import jsPDF from “jspdf”

3、使用：

let pdf = new jsPDF('p', 'pt', [pdfX, pdfY]);

第一个参数： l：横向 p：纵向

第二个参数：测量单位（“pt”，“mm”, “cm”, “m”, “in” or “px”）

第三个参数：可以是下面格式，默认为“a4”

a0 - a10
b0 - b10
c0 - c10
dl
letter
government-letter
legal
junior-legal
ledger
tabloid
credit-card

默认为“a4”。如果您想使用自己的格式，只需将大小作为数字数组传递，例如[595.28, 841.89];

*删除某页pdf：*

let targetPage = pdf.internal.getNumberOfPages(); //获取总页
pdf.deletePage(targetPage); // 删除目标页

*保存pdf文档：*

 pdf.save(`测试.pdf`);

Example：

1、导出一整页pdf文件，根据图片高度动态设置pdf的位置，*根据自己的数据格式组装导出方法*

/**
   * 导出PDF一页 PDF中的页面宽度或高度不能超过14400个userUnit。jsPDF将宽度/高度限制为14400
   * @param pageList
   */
  const exportPdf = (pageList: any) => {
    let [imgX, imgY] = [595.28, 841.89]; // a4纸尺寸[595.28, 841.89];
    var pdfX = imgX
    var pdfY = getLength(pageList);
    let pdf = new jsPDF('p', 'pt', [pdfX, pdfY]); //l：横向  p：纵向
    let isAddpage = 0;
    for (let [index, item] of pageList.entries()) {
      for (let j = 0; j < item.imageList.length; j++) {
        const image = item.imageList[j];
        let imgHeight = imgX / (image.width / image.height);
        pdf.addImage(image.data, 'JPEG', 0, isAddpage, imgX, imgHeight);
        isAddpage += imgHeight;
      }
    }
    pdf.save(`全部教材_${getTime()}.pdf`);
  }

2、分页导出

  const exportPdf = (pageList: any) => {
    let [imgX, imgY] = [595.28, 841.89];
    let pdf = new jsPDF('p', 'pt', 'a4');
    for (let [index, item] of pageList.entries()) {
      for (let j = 0; j < item.imageList.length; j++) {
        const image = item.imageList[j];
        let imgHeight = imgX / (image.width / image.height); //根据宽度计算高度
        pdf.addImage(image.data, 'JPEG', 0, 0, imgX, imgHeight);
        pdf.addPage();
      }
    }
    let targetPage = pdf.internal.getNumberOfPages();
    pdf.deletePage(targetPage); // 删除最后一页
    pdf.save(`测试.pdf`);
  }

总结

到此这篇关于Vue3导出pdf文件的文章就介绍到这了,更多相关Vue3导出pdf内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

图文详解Vue3没有代码提示问题的解决办法
最近在使用Vue.js时候没有自动提示,就很难受,下面这篇文章主要给大家介绍了关于Vue3没有代码提示问题的解决办法,文中通过图文介绍的非常详细,需要的朋友可以参考下
2023-01-01
vue实现滑动解锁功能
这篇文章主要为大家详细介绍了vue实现滑动解锁功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-03-03
Vue中v-model的使用示例详解
v-model就是vue的双向绑定的指令,能将页面上控件输入的值同步更新到相关绑定的data属性,也会在更新data绑定属性时候,更新页面上输入控件的值,这篇文章主要介绍了Vue之v-model的使用,需要的朋友可以参考下
2025-04-04
关于配置babel-plugin-import报错的坑及解决
这篇文章主要介绍了关于配置babel-plugin-import报错的坑及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-12-12
Vue3+TS实现动态路由权限的示例详解
当我们在开发一个大型的前端应用时,动态路由权限是一个必不可少的功能,本文将介绍如何使用Vue 3和TypeScript来实现动态路由权限,希望对大家有所帮助
2024-01-01
vue3+vite引入插件unplugin-auto-import的方法
这篇文章主要介绍了vue3+vite引入插件unplugin-auto-import的相关知识，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值 ,需要的朋友可以参考下
2022-10-10
Vue2几种常见开局方式详解
这篇文章主要为大家详细介绍了Vue2几种常见开局方式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-09-09
vue2 v-model/v-text 中使用过滤器的方法示例
这篇文章主要介绍了vue2 v-model/v-text 中使用过滤器的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-05-05
在Vue3+Vite项目中开启Gzip压缩过程
这篇文章主要介绍了在Vue3+Vite项目中开启Gzip压缩过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2025-10-10
vue.js 底部导航栏一级路由显示子路由不显示的解决方法
下面小编就为大家分享一篇vue.js 底部导航栏一级路由显示子路由不显示的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-03-03