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 相关文章推荐
论坛特效代码收集(落伍转发-不错)
Dec 02 Javascript
jQuery lazyload 的重复加载错误以及修复方法
Nov 19 Javascript
jQuery的Ajax的自动完成功能控件简要说明
Feb 22 Javascript
jQuery中not()方法用法实例
Jan 06 Javascript
浅谈Jquery中Ajax异步请求中的async参数的作用
Jun 06 Javascript
基于JS+Canves实现点击按钮水波纹效果
Sep 15 Javascript
如何在Angular.JS中接收并下载PDF
Nov 26 Javascript
Vue.js 60分钟快速入门教程
Mar 28 Javascript
JS实现字符串去重及数组去重的方法示例
Apr 21 Javascript
vue2.0 + ele的循环表单及验证字段方法
Sep 18 Javascript
如何在 JavaScript 中更好地利用数组
Sep 27 Javascript
详解如何使用node.js的开发框架express创建一个web应用
Dec 20 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 向访客和爬虫显示不同的内容
2009/11/09 PHP
解决文件名解压后乱码的问题 将文件名进行转码的代码
2012/01/10 PHP
PHP准确取得服务器IP地址的方法
2015/06/02 PHP
利用php生成验证码
2017/02/23 PHP
php+redis实现消息队列功能示例
2019/09/19 PHP
JQuery将文本转化成JSON对象需要注意的问题
2011/05/09 Javascript
JQuery制作的放大效果的popup对话框(未添加任何jquery plugin)分享
2013/04/28 Javascript
当鼠标滑过文本框自动选中输入框内容的JS代码分享
2013/11/26 Javascript
node.js中的fs.ftruncate方法使用说明
2014/12/15 Javascript
jQuery实现数字加减效果汇总
2014/12/16 Javascript
JS实现5秒钟自动封锁div层的方法
2015/02/20 Javascript
JS实现网页顶部向下滑出的全国城市切换导航效果
2015/08/22 Javascript
js右下角弹出提示框示例代码
2016/01/12 Javascript
jQuery简单操作cookie的插件实例
2016/01/13 Javascript
JQuery ztree带筛选、异步加载实例讲解
2016/02/25 Javascript
AngularJS教程 ng-style 指令简单示例
2016/08/03 Javascript
js接收并转化Java中的数组对象的方法
2016/08/11 Javascript
Yarn的安装与使用详细介绍
2016/10/25 Javascript
Vue2.2.0+新特性整理及注意事项
2018/08/22 Javascript
微信小程序websocket实现即时聊天功能
2019/05/21 Javascript
JSX在render函数中的应用详解
2019/09/04 Javascript
解决vue.js提交数组时出现数组下标的问题
2019/11/05 Javascript
JS前端面试必备——基本排序算法原理与实现方法详解【插入/选择/归并/冒泡/快速排序】
2020/02/24 Javascript
解决VueCil代理本地proxytable无效报错404的问题
2020/11/07 Javascript
Python中用于返回绝对值的abs()方法
2015/05/14 Python
django反向解析和正向解析的方式
2018/06/05 Python
Pycharm如何运行.py文件的方法步骤
2020/03/03 Python
image-set实现Retina屏幕下图片显示详细介绍
2012/12/24 HTML / CSS
css3加js做一个简单的3D行星运转效果实例代码
2017/01/18 HTML / CSS
耐克波兰官方网站:Nike波兰
2019/09/03 全球购物
linux面试题参考答案(11)
2016/11/26 面试题
求职信内容考虑哪几点
2013/10/05 职场文书
2015入党自荐书范文
2015/03/05 职场文书
员工家属慰问信
2015/03/24 职场文书
教师廉政准则心得体会
2016/01/20 职场文书
HTML基本元素标签介绍
2022/02/28 HTML / CSS