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 相关文章推荐
jQuery 行级解析读取XML文件(附源码)
Oct 12 Javascript
JavaScript 类的定义和引用 JavaScript高级培训 自定义对象
Apr 27 Javascript
namespace.js Javascript的命名空间库
Oct 11 Javascript
基于jquery的$.ajax async使用
Oct 19 Javascript
封装了jQuery的Ajax请求全局配置
Feb 05 Javascript
JavaScript实现的圆形浮动标签云效果实例
Aug 06 Javascript
js如何改变文章的字体大小
Jan 08 Javascript
详解javascript实现瀑布流绝对式布局
Jan 29 Javascript
Vue.js每天必学之计算属性computed与$watch
Sep 05 Javascript
深入理解Vue2.x的虚拟DOM diff原理
Sep 27 Javascript
vue+iview写个弹框的示例代码
Dec 05 Javascript
JavaScript 对象创建的3种方法
Nov 17 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和ACCESS写聊天室(八)
2006/10/09 PHP
DedeCms模板安装/制作概述
2007/03/11 PHP
Fine Uploader文件上传组件应用介绍
2013/01/06 PHP
php实现用手机关闭计算机(电脑)的方法
2015/04/22 PHP
起点页面传值js,有空研究学习下
2010/01/25 Javascript
JavaScript单元测试ABC
2012/04/12 Javascript
JS字符串截取函数实例
2013/12/27 Javascript
js构造函数、索引数组和属性的实现方式和使用
2014/11/16 Javascript
详解Angular中$cacheFactory缓存的使用
2016/08/19 Javascript
jquery删除数组中重复元素
2016/12/05 Javascript
Angular 2父子组件数据传递之局部变量获取子组件其他成员
2017/07/04 Javascript
Express + Session 实现登录验证功能
2017/09/08 Javascript
JS实现点击链接切换显示隐藏内容的方法
2017/10/19 Javascript
如何获取TypeScript的声明文件.d.ts
2018/05/01 Javascript
vue2中引用及使用 better-scroll的方法详解
2018/11/15 Javascript
JavaScript从原型到原型链深入理解
2019/06/03 Javascript
微信小程序如何播放腾讯视频的实现
2019/09/20 Javascript
javascript实现弹幕墙效果
2019/11/28 Javascript
基于JS实现计算24点算法代码实例解析
2020/07/23 Javascript
[02:32]DOTA2英雄基础教程 美杜莎
2014/01/07 DOTA
[04:48]DOTA2上海特锦赛小组赛第三日 TOP10精彩集锦
2016/02/28 DOTA
[01:00:10]完美世界DOTA2联赛PWL S2 FTD vs Inki 第二场 11.21
2020/11/24 DOTA
Python语言的12个基础知识点小结
2014/07/10 Python
Python读取图片EXIF信息类库介绍和使用实例
2014/07/10 Python
python中in在list和dict中查找效率的对比分析
2018/05/04 Python
对python:print打印时加u的含义详解
2018/12/15 Python
对python中类的继承与方法重写介绍
2019/01/20 Python
Python中使用logging和traceback模块记录日志和跟踪异常
2019/04/09 Python
Python实现FTP文件定时自动下载的步骤
2020/12/19 Python
CSS3实现任意图片lowpoly动画效果实例
2017/05/11 HTML / CSS
公务员政审材料
2014/12/23 职场文书
2015年客房服务员工作总结
2015/05/15 职场文书
亮剑观后感500字
2015/06/05 职场文书
经营场所证明范本
2015/06/19 职场文书
python中__slots__节约内存的具体做法
2021/07/04 Python
Redis基本数据类型List常用操作命令
2022/06/01 Redis