vue导出pdf格式文件

>> 欢迎您客人: 登录 | 注册 | 在线 | 搜索 | 风格 | 帮助 | 统计 | 文章

返回首页

>>分享Web前端开发技术，并对孙卫琴的《精通Vue.js:Web前端开发技术详解》提供技术支持

书籍支持

卫琴直播

品书摘要

在线测试

资源下载

联系我们

Java技术网站 → 『 Java开发技术』 → 『 Web前端开发技术专题』 → vue导出pdf格式文件

您是本文章第 15959 个阅读者

* 贴子主题: vue导出pdf格式文件

点赞(0) 收藏

作者:sunshine 发表时间：2021-02-04 01:55:57

消息

查看

搜索

好友

邮件

复制

引用

一、安装所需要的依赖

1.将页面html转换成图片
npm install --save html2canvas

2.将图片转换成gif
npm install jspdf --save

二、定义全局函数，创建一个htmlToPdf.js文件在指定位置（看个人习惯，一般都在'src/components/utils/htmlToPdf'）

// 导出页面为PDF格式
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default{
  install(Vue, options){
    Vue.prototype.getPdf = function(){
      var title = this.htmlTitle
      html2Canvas (document.querySelector('#pefDom'),{
        allowTait:true
      }).then(function (canvas){
        let contentWidth = canvas.width
        let contentHeight = canvas.height
        let pageHeight = contentWidth / 592.68 * 841.89
        let leftHeight = contentHeight
        let postion = 0
        let imgWidth = 595.68
        let imgHeight = 592.28 / contentWidth * contentHeight
        let pageData = canvas.toDataURL('image/jpeg',1.0)
        let PDF = new JsPDF('','pt','a4')
        if(leftHeight < pageHeight){
          PDF.addImage(pageData,'JPEG',0,0,imgWidth,imgHeight)
        }else{
          while(leftHeight > 0 ){
            PDF.addImage(pageData,'JPEG',0,postiotion,imgWidth,imgHeight)
            leftHeight -= pageHeight
            position -= 841.89
            if(leftHeight > 0){
              PDF.addPage()
            }
          }
        }
        PDF.save(title + '.pdf')
      })
    }
  }
}

三、在main.js中使用我们定义的函数文件。

import htmlToPdf from '@/components/utils/htmlToPdf'
Vue.use(htmlToPdf)

四、在需要的导出页面调用我们的getPdf方法即可

<div class="row"  id="pdfDom" style="padding-top:55px;background-color:#fff">
  //给自己需要导出的UI部分定义id为'pdfDom'此部分将是pdf显示的部分
</div>
<button type="button" class="btn btn-parimary" @click="getPdf()"></button>
......
export default{
  data(){
    return {
      htmlTitle:'页面导出PDF文件名'
    }
  }
}

----------------------------
原文链接:https://www.jianshu.com/p/ab3d2d507d78

程序猿的技术大观园：www.javathinker.net

[这个贴子最后由 flybird 在 2021-02-15 13:27:57 重新编辑]

Java精品书籍推荐