vue 导出pdf

最新推荐文章于 2024-10-07 16:17:05 发布

你要走就走

最新推荐文章于 2024-10-07 16:17:05 发布

阅读量148

点赞数

分类专栏： pdf 导出文章标签： html5 vue.js javascript

本文链接：https://blog.csdn.net/weixin_48852004/article/details/120283247

版权

本文介绍了如何在Vue项目中利用html2canvas和jspdf插件将HTML内容转换为高质量PDF。虽然这个方法可能导致生成的PDF质量下降、图像失真以及分页时图片被分割，但通过详细步骤，指导读者完成从安装插件、创建js文件到在Vue组件中实现导出功能的全过程。

摘要由CSDN通过智能技术生成

使用html2canvas和jspdf插件实现

这个方式是通过html2canvasl来把html页面转换成图片，然后再通过jspdf将图片转换为pdf文件

这个方法有个非常不好的缺点

生成的pdf质量不高，画面有些模糊，失真严重
如果在分页的地方有图片的话，可能会把图片也给你一分为二了
1. 安装插件加粗样式

先安装第一个 html2canvas 插件，这个作用是实现将 html 页面转换成图片

在你的控制住台输入下面指令

npm install --save html2canvas

然后再安装第二个插件，这个插件的作用是将图片转为 pdf

在你的控制住台输入下面指令

npm install jspdf --save

2. 创建 htmlToPdf.js 文件

安装好了上面的两个插件后，在你的项目里创建一个js文件，项目里应该会有个专门放js文件的文件夹，其实你自己找地方放也可以，只要你能找到就行，把 js 文件的名字和我写的一样就行
然后记住你这个文件的路径列：(‘src/scripts/common/utils/htmlToPdf’)’

3. 在你创建的 htmlToPdf.js 文件里面写入以下代码

直接全部赋值粘贴过去就好了

import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default {
   
  install (Vue, options) {
   
    Vue.prototype.getPdf = function (idStr, title) {
   
      html2Canvas(document.querySelector('#' + idStr), {
   
        // allowTaint: true,
        useCORS: true,
        // scale: 2, // 提升画面质量，但是会增加文件大小
      }).then((canvas) => {
   
        const contentWidth = canvas.width
        const contentHeight = canvas<