vue2生成图片导出pdf

最新推荐文章于 2024-03-13 09:02:33 发布

SING327

最新推荐文章于 2024-03-13 09:02:33 发布

阅读量1.3k

点赞数 1

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/weixin_65859689/article/details/126248494

版权

至此，这篇结束，欢迎评论区留言首先这次操作需要用到两个插件

第一个就是用来生成图片的 html2canvas，安装命令如下：

npm install html2canvas

第二个就是生成图片以后需要导出pdf格式的插件,安装命令如下：

npm install jspdf

当安装好了以后，全局引入需要在main.js中引入然后挂载到vue实例上，局部的只需要引入就可以了，不需要挂载，我用的是局部引入

话不多说，上代码：

handleDom(dom){
       //接受下面点击事件传递过来的dom节点参数进行克隆节点
      let newDom = dom.cloneNode(true);
//给克隆的节点添加上类名，出现这个函数是因为我要改掉生成pdf以后pdf里面的文字颜色，如果不需要改变生成pdf以后pdf的布局就不用写这个函数
      newDom.className='pdfClass'
    //把结果return出去
      return newDom;
   },

//点击导出的时间
async downloadImg(){

    //保留this指向
      let _this = this
 
       //这句if语句不用管，重要的是里面的内容
      if(Object.keys(this.subJectPush).length>0){
        //获取到dom节点
        let pouduct = this.$refs.orderForm1;

        //把获取到的dom节点作为参数传到另一个函数中,用一个变量接收
        let proposal = await this.handleDom(pouduct);
        //把刚刚的变量追加到需要的dom节点后面
        document.getElementById('orderForm1').appendChild(proposal);
       //创一个实例
        new html2canvas(proposal, {
          useCORS: true, //是否尝试使用CORS从服务器加载图像
          allowTaint: true,
          dpi: 300, //解决生产图片模糊
          scale: 3,
          backgroundColor:'#fff',
        }).then(function (canvas) {
         //创好以后记住一定要在这最开始的地方给追加的节点删除掉，不然会直接出现在你的页面上
          document.getElementById('orderForm1').removeChild(new_product_proposal);
            //接受插件自带的canvas宽度和高度
          let contentWidth = canvas.width
          let contentHeight = canvas.height
          let pageHeight = contentWidth / 592.28 * 841.89 // 一页pdf显示html页面生成的canvas高度;
          let leftHeight = contentHeight //未生成pdf的html页面高度
          let position = 0 //pdf页面偏移
          let imgWidth = 560.28  //宽度
          let imgHeight = 592.28 / contentWidth * contentHeight
          let pageData = canvas.toDataURL('image/jpeg', 1.0)
          let PDF = new JsPDF('', 'pt', 'a4')

          // 有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
          //当内容未超过pdf一页显示的范围，无需分页
          if (leftHeight < pageHeight) {
            PDF.addImage(pageData, 'JPEG', 20, 20, imgWidth, imgHeight)
          } else {
            while (leftHeight > 0) {
              PDF.addImage(pageData, 'JPEG', 20, position, imgWidth, imgHeight)
              leftHeight -= pageHeight
              position -= 841.89
              if (leftHeight > 0) {
                PDF.addPage()
              }
            }
          }
          PDF.save(_this.value+'报告' + '.pdf')//下载标题

        });
      }