Vue导出页面为PDF格式的实现思路


Posted in Javascript onJuly 31, 2018

通过网上的查阅以后,说一下思路.就是将页面转换成图片格式.然后通过图片的base64码.生成PDF..看了他们的文章,做了如下整理..

说起来很容易,那么具体怎么实现呢?

1 、我们要添加两个模块

第一个.将页面html转换成图片

npm install --save html2canvas

第二个.将图片生成pdf

npm install jspdf --save

2、定义全局函数..创建一个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('#pdfDom'), {
  allowTaint: true
  }).then(function (canvas) {
  let contentWidth = canvas.width
  let contentHeight = canvas.height
  let pageHeight = contentWidth / 592.28 * 841.89
  let leftHeight = contentHeight
  let position = 0
  let imgWidth = 595.28
  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, position, imgWidth, imgHeight)
   leftHeight -= pageHeight
   position -= 841.89
   if (leftHeight > 0) {
    PDF.addPage()
   }
   }
  }
  PDF.save(title + '.pdf')
  }
  )
 }
 }
}

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

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

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

Html

<div class="row" id="pdfDom" style="padding-top: 55px;background-color:#fff;">
 //给自己需要导出的ui部分.定义id为"pdfDom".此部分将就是pdf显示的部分
</div>
<button type="button" class="btn btn-primary"v-on:click="getPdf()">导出PDF</button>

js

export default {
 data () {
  return {
  htmlTitle: '页面导出PDF文件名'
  }
 }
 }

总结

以上所述是小编给大家介绍的Vue导出页面为PDF格式的实现思路,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript获取/更改文本框的值的实例代码
Aug 02 Javascript
JS实现倒计时和文字滚动的效果实例
Oct 29 Javascript
jQuery实现简单二级下拉菜单
Apr 12 Javascript
js代码实现随机颜色的小方块
Jul 30 Javascript
js密码强度校验
Nov 10 Javascript
基于bootstrap插件实现autocomplete自动完成表单
May 07 Javascript
JS模拟的Map类实现方法
Jun 17 Javascript
React实现点击删除列表中对应项
Jan 10 Javascript
react native与webview通信的示例代码
Sep 25 Javascript
vuex实现及简略解析(小结)
Mar 01 Javascript
JavaScript 正则应用详解【模式、欲查、反向引用等】
May 13 Javascript
JavaScript 获取滚动条位置并将页面滑动到锚点
Feb 08 Javascript
详解微信小程序实现WebSocket心跳重连
Jul 31 #Javascript
前端axios下载excel文件(二进制)的处理方法
Jul 31 #Javascript
JS构造一个html文本内容成文件流形式发送到后台
Jul 31 #Javascript
vue导出html、word和pdf的实现代码
Jul 31 #Javascript
JavaScript函数节流和函数去抖知识点学习
Jul 31 #Javascript
JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例
Jul 31 #Javascript
微信网页授权并获取用户信息的方法
Jul 30 #Javascript
You might like
PHP高自定义性安全验证码代码
2011/11/27 PHP
PHP对文件夹递归执行chmod命令的方法
2015/06/19 PHP
索趣科技的答案
2007/02/07 Javascript
javascript Select标记中options操作方法集合
2008/10/22 Javascript
nodejs通过phantomjs实现下载网页
2015/05/04 NodeJs
JavaScript变量作用域_动力节点Java学院整理
2017/06/27 Javascript
深入解析Vue 组件命名那些事
2017/07/18 Javascript
利用Three.js如何实现阴影效果实例代码
2017/09/26 Javascript
jquery中有哪些api jQuery主要API
2017/11/20 jQuery
Ionic学习日记实现验证码倒计时
2018/02/08 Javascript
vue之父子组件间通信实例讲解(props、$ref、$emit)
2018/05/22 Javascript
浅谈webpack SplitChunksPlugin实用指南
2018/09/17 Javascript
vue+php实现的微博留言功能示例
2019/03/16 Javascript
vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序
2019/07/08 Javascript
JavaScript 自定义html元素鼠标右键菜单功能
2019/12/02 Javascript
vuex(vue状态管理)的特殊应用案例分享
2020/03/03 Javascript
js实现随机圆与矩形功能
2020/10/29 Javascript
nuxt 服务器渲染动态设置 title和seo关键字的操作
2020/11/05 Javascript
利用Python获取操作系统信息实例
2016/09/02 Python
Python 2.x如何设置命令执行的超时时间实例
2017/10/19 Python
TensorFlow 实战之实现卷积神经网络的实例讲解
2018/02/26 Python
python实现将excel文件转化成CSV格式
2018/03/22 Python
python生成ppt的方法
2018/06/07 Python
python利用paramiko实现交换机巡检的示例
2020/09/22 Python
python自动从arxiv下载paper的示例代码
2020/12/05 Python
微信浏览器左上角返回按钮拦截功能
2017/11/21 HTML / CSS
html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因
2013/01/09 HTML / CSS
美国购车网站:TrueCar
2016/10/19 全球购物
英国高级健康和美容产品零售商:Life and Looks
2019/08/01 全球购物
分布式数据库需要考虑哪些问题
2013/12/08 面试题
聚美优品广告词改编
2014/03/14 职场文书
高中生第一学年自我鉴定2015
2014/09/28 职场文书
学院党委班子四风问题自查报告及整改措施
2014/10/25 职场文书
有限公司股东合作协议书
2014/10/29 职场文书
幽默导游词开场白
2015/05/29 职场文书
pytorch 如何使用amp进行混合精度训练
2021/05/24 Python