java map转string Markdown编辑器 全局重载运算符 javascript sqlite validation flask grails ssis tinymce Validator vue滑动事件 teamviewer验证被拒绝 linux 获取系统时间 linux下载器 python正则 python数据库 python入门例子 python获取输入 python导入文件 java包 java时间戳转换成时间 java时间类型 java配置文件 内存整理软件 内存整理工具 迷你版kms jb51 音频录制软件 零基础学python php抓取网页数据 视频解析软件 3d看图软件 cubase下载 pr动态字幕 asp编程 正则表达式数字 驱动精灵绿色版 燃烧之血十字架
当前位置: 首页 > 学习教程  > 编程语言

前端实现下载pdf的两种方法

2020/12/28 19:23:26 文章标签:

1、使用html2canvas和jspdf插件实现 该方式是通过html2canvas将HTML页面转换成图片,然后再通过jspdf将图片的base64生成为pdf文件。 实现步骤如下: (1)下载插件模块: npm install html2canvas jspdf --save npm install jspdf --save(2)定…

1、使用html2canvas和jspdf插件实现
该方式是通过html2canvas将HTML页面转换成图片,然后再通过jspdf将图片的base64生成为pdf文件。
实现步骤如下:

(1)下载插件模块:

npm install html2canvas jspdf --save             
npm install jspdf --save

(2)定义功能实现方法
在项目工具方法存放文件夹utils中创建htmlToPdf.js文件,
代码如下:

export default{
  install (Vue, options) {
    Vue.prototype.getPdf = function () {
    //      console.log('begin download...')
      setTimeout(( =>{
        //console.log('downloading...')
      var title = this.htmlTitle
        html2canvas($("#pdfDom")[0],{
        **配置参数**
         width: 980,
         height: 980 * 1.4142 * this.page,
         background: "#fff",
         scale: 2.1,
         tainttest: true,
         logging: false,
         letterRendering: true,
         llowTaint: true
      }).then(function (canvas) {
        var contentWidth = canvas.width
          var contentHeight = canvas.height
          // A4纸宽高
          var A4Width = 595.28
          var A4Height = 841.89
          // 一页pdf显示html页面生成的canvas高度
          var pageHeight = contentWidth / A4Width * A4Height
          // 未生成pdf的html页面高度
          var leftHeight = contentHeight
          // pdf页面偏移
          var position = 0
          // pdf页面内边距
          var pdfPadding = 0
          // a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高
          var imgWidth = A4Width
          var imgHeight = A4Width / contentWidth * contentHeight
          var pageData = canvas.toDataURL('image/jpeg', 1.0)
          var pdf = new JsPdf('', 'pt', 'a4')
         // 有两个高度需要区分,一个是html页面的实际高度,和生成pdf的页面高度(841.89)
          // 当内容未超过pdf一页显示的范围,无需分页
          if (leftHeight < pageHeight) {
            pdf.addImage(pageData, 'JPEG', pdfPadding, 0, imgWidth, imgHeight)
          } else {
            while (leftHeight > 0) {
              pdf.addImage(pageData, 'JPEG', pdfPadding, position, imgWidth, imgHeight)
              leftHeight -= pageHeight
              position -= A4Height
              leftHeight > 0 && pdf.addPage()
            }
          }
        PDF.save(title + '.pdf')
      }
      }
       },2000)
    }
  }
}

(3)全局引入实现方法
在项目主文件main.js中引入定义好的实现方法,并注册。

import htmlToPdf from '@/components/utils/htmlToPdf'
// 使用Vue.use()方法就会调用工具方法中的install方法
Vue.use(htmlToPdf)

(4)在相关要导出的页面中,点击时调用绑定在Vue原型上的getPdf方法,传入id即可

//html
 <div id="pdfDom">
   //要下载的HTML页面,页面是由后台返回
  <div v-html="pageData"></div>
</div>
<el-button type="primary" size="small" @click="getPdf('#pdfDom')">点击下载</el-button>

原理差不多,只不过下边的方法更好些,下载的pdf页面多的情况也可以下载出来,用上边的方法,内容多的情况,下载会出现空白页的情况,下边的方法我认为是好于上边的。下边的方法我是通过iframe来实现的
2、使用dom-to-image和jspdf插件实现
实现步骤如下:

(1)下载插件模块:

npm install dom-to-image --save             
npm install jspdf --save

(2、3、4) 同上
为避免下载的不全或者后台数据还没加载完全,就下载pdf ,所以最好在mounted里 通过eventBus,执行完获取数据的方法之后加一个延时器,确保后台返回的数据都已经渲染完,再执行下载的方法,

 async mounted() {
  await this.getData();
      this.$nextTick(() => {
        setTimeout(() => {
          this.$Eventbus.$emit("isCanDownload", { isRendered: true });
        }, 1000);
      });
  },

在预览页的mounted里接收一下,判断条件加好,条件成立,再执行下载的方法

 this.$Eventbus.$on("isCanDownload", (val) => {
      if (val.isRendered && this.isDownload) {
        this.isDownload = false;
        this.download();
      }
    });

 window.addEventListener(
      "message",
      (event) => {
        if (event.data === "下载") {
          this.isDownload = true;
        }
      },
      false
    );

在主页面可以这样来写,代码如下

<div class="custom-pdf" v-if="href">
      <iframe
        :src="href"
        frameborder="0"
        id="custom-pdf"
      ></iframe>
    </div>

然后在下载的方法同上getpdf里边调用方法

this.$nextTick(() => {
     document.getElementById("custom-pdf").onload = () => {
       document
         .getElementById("custom-pdf")
           .contentWindow.postMessage(
               "下载",
                location.origin + "/" + router.href
              );
          };
          window.addEventListener(
            "message",
            (event) => {
              if (event.data === "完成") {
                this.isDownloading = false;
              }
            },
            false
          );
        });

本文链接: http://www.dtmao.cc/news_show_550233.shtml

附件下载

上一篇:ElasticSearch工具系列--综述

下一篇:基数

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?