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 面向对象编程 function也是类
Sep 17 Javascript
jQuery EasyUI API 中文文档 - TimeSpinner时间微调器
Oct 23 Javascript
web的各种前端打印方法之jquery打印插件PrintArea实现网页打印
Jan 09 Javascript
asp.net中System.Timers.Timer的使用方法
Mar 20 Javascript
关于JS管理作用域的问题
Apr 10 Javascript
JavaScript中的undefined学习总结
Nov 30 Javascript
JSON.parse()和JSON.stringify()使用介绍
Jun 20 Javascript
Jquery中巧用Ajax的beforeSend方法
Jan 20 Javascript
jQuery弹出层插件popShow(改进版)用法示例
Jan 23 Javascript
jQuery模拟12306城市选择框功能简单实现方法示例
Aug 13 jQuery
JS加密插件CryptoJS实现AES加密操作示例
Aug 16 Javascript
在Node.js下运用MQTT协议实现即时通讯及离线推送的方法
Jan 24 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 setcookie指定domain参数后,在IE下设置cookie失效的解决方法
2011/09/09 PHP
php使用gzip压缩传输js和css文件的方法
2015/07/29 PHP
详解php设置session(过期、失效、有效期)
2015/11/12 PHP
分析PHP中单双引号的误区和双引号小隐患
2016/07/19 PHP
对象的类型:本地对象(1)
2006/12/29 Javascript
二级域名或跨域共享Cookies的实现方法
2008/08/07 Javascript
JavaScript高级程序设计(第3版)学习笔记11 内建js对象
2012/10/11 Javascript
js调用浏览器打印模块实现点击按钮触发自定义函数
2014/03/21 Javascript
jQuery下拉美化搜索表单效果代码分享
2015/08/25 Javascript
浅谈Nodejs观察者模式
2015/10/13 NodeJs
javascript常用经典算法实例详解
2015/11/25 Javascript
javascript模块化简单解析
2016/04/07 Javascript
使用Object.defineProperty实现简单的js双向绑定
2016/04/15 Javascript
vue axios同步请求解决方案
2017/09/29 Javascript
微信小程序出现wx.navigateTo页面不跳转问题的解决方法
2017/12/26 Javascript
jQuery实现数字自动增加或者减少的动画效果示例
2018/12/11 jQuery
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
2019/10/14 Javascript
Javascript和jquery在selenium的使用过程
2019/10/31 jQuery
微信小游戏中three.js离屏画布的示例代码
2020/10/12 Javascript
JS removeAttribute()方法实现删除元素的某个属性
2021/01/11 Javascript
[02:42]完美大师赛主赛事淘汰赛第三日观众采访
2017/11/25 DOTA
Python实现全局变量的两个解决方法
2014/07/03 Python
Python合并多个装饰器小技巧
2015/04/28 Python
python通过get,post方式发送http请求和接收http响应的方法
2015/05/26 Python
Python使用functools实现注解同步方法
2018/02/06 Python
PyQt5打开文件对话框QFileDialog实例代码
2018/02/07 Python
Python干货:分享Python绘制六种可视化图表
2018/08/27 Python
基于注解实现 SpringBoot 接口防刷的方法
2021/03/02 Python
canvas实现滑动验证的实现示例
2020/08/11 HTML / CSS
亚马逊意大利站点:Amazon.it
2020/12/31 全球购物
抵押贷款承诺书
2014/05/30 职场文书
销售目标责任书
2014/07/23 职场文书
政风行风建设整改方案
2014/10/27 职场文书
2014年学校工会工作总结
2014/12/06 职场文书
2019大学毕业晚会主持词
2019/06/21 职场文书
创业分两种人:那么哪些适合创业?,哪些适合不适合创业呢?
2019/08/23 职场文书