vue中将网页打印成pdf实例代码


Posted in Javascript onJune 15, 2017

整理文档,搜刮出一个vue中将网页打印成pdf的代码,稍微整理精简一下做下分享。

<template>
<div class="pdf-wrap" id="pdfWrap">
 <button v-on:click="getPdf">点击下载PDF</button>
 <div class="pdf-dom" id="pdfDom"></div>
</div>
</template>
<style lang="scss" scoped>

</style>
<script type="text/ecmascript-6">
 import html2Canvas from '@/components/html2canvas.js'
 import JsPDF from '@/components/jsPdf.debug.js'

 export default {
  methods: {
   getPdf: function () {
    let _this = this
    let pdfDom = document.querySelector('#pdfDom')
    html2Canvas(pdfDom, {
     onrendered: 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(_this.pdfData.title + '.pdf')
     }
    })
    html2Canvas()
   },
  }
 }
</script>

需要引入

html2canvas.js'

jsPdf.debug.js

这两个插件库可轻松百度到。如果eslint验证报错,可在eslintignore中设置不对这两个文件进行验证。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 获取图片颜色
Apr 05 Javascript
JS动态调用方法名示例介绍
Dec 18 Javascript
JavaScript两种跨域技术全面介绍
Apr 16 Javascript
javascript实现简单的二级联动
Mar 19 Javascript
浅析JavaScript中作用域和作用域链
Dec 06 Javascript
实现一个简单的vue无限加载指令方法
Jan 10 Javascript
js获取当前周、上一周、下一周日期
Mar 19 Javascript
详解angular中通过$location获取路径(参数)的写法
Mar 21 Javascript
vue数据初始化initState的实例详解
Apr 11 Javascript
javascript使用substring实现的展开与收缩文字功能示例
Jun 17 Javascript
使用js在layui中实现上传图片压缩
Jun 18 Javascript
详解vue高级特性
Jun 09 Javascript
Bootstrap Tree View简单而优雅的树结构组件实例解析
Jun 15 #Javascript
Angularjs为ng-click事件传递参数
Jun 15 #Javascript
详解原生js实现offset方法
Jun 15 #Javascript
微信小程序 监听手势滑动切换页面实例详解
Jun 15 #Javascript
微信小程序canvas写字板效果及实例
Jun 15 #Javascript
AngularJs实现聊天列表实时刷新功能
Jun 15 #Javascript
bootstrap daterangepicker双日历时间段选择控件详解
Jun 15 #Javascript
You might like
给ECShop添加最新评论
2015/01/07 PHP
完美利用Yii2微信后台开发的系列总结
2016/07/18 PHP
用YUI做了个标签浏览效果
2007/02/20 Javascript
动态为事件添加js代码示例
2009/02/15 Javascript
体验js中splice()的强大(插入、删除或替换数组的元素)
2013/01/16 Javascript
jquery实现的一个导航滚动效果具体代码
2013/05/27 Javascript
js使浏览器窗口最大化实现代码(适用于IE)
2013/08/07 Javascript
Javascript中的Array数组对象详谈
2014/03/03 Javascript
JavaScript实现广告的关闭与显示效果实例
2015/07/02 Javascript
VueJs与ReactJS和AngularJS的异同点
2016/12/12 Javascript
20行JS代码实现网页刮刮乐效果
2017/06/23 Javascript
使用nodeJs来安装less及编译less文件为css文件的方法
2017/11/20 NodeJs
JavaScript比较同一天的时间大小实例代码
2018/02/09 Javascript
iview table高度动态设置方法
2018/03/14 Javascript
laypage+SpringMVC实现后端分页
2019/07/27 Javascript
JavaScript数值类型知识汇总
2019/11/17 Javascript
webpack+vue-cil 中proxyTable配置接口地址代理操作
2020/07/18 Javascript
vue 需求 data中的数据之间的调用操作
2020/08/05 Javascript
利用Python自动监控网站并发送邮件告警的方法
2016/08/24 Python
numpy数组拼接简单示例
2017/12/15 Python
在matplotlib的图中设置中文标签的方法
2018/12/13 Python
python3读取图片并灰度化图片的四种方法(OpenCV、PIL.Image、TensorFlow方法)总结
2019/07/04 Python
详细介绍Python进度条tqdm的使用
2019/07/31 Python
Python对接支付宝支付自实现功能
2019/10/10 Python
Python 剪绳子的多种思路实现(动态规划和贪心)
2020/02/24 Python
html5给汉字加拼音加进度条的实现代码
2020/04/07 HTML / CSS
英国巧克力贸易公司:Chocolate Trading Company
2017/03/21 全球购物
女性时尚在线:IVRose
2019/02/23 全球购物
美国巧克力喷泉品牌:Sephra
2019/05/05 全球购物
入党积极分子思想汇报
2014/01/02 职场文书
《大自然的语言》教学反思
2014/04/08 职场文书
2014年世界艾滋病日宣传活动总结
2014/11/18 职场文书
酒店温馨提示语
2015/07/14 职场文书
培训感想范文
2015/08/07 职场文书
公司致全体员工的感谢信
2019/06/24 职场文书
HTML5 新增内容和 API详解
2021/11/17 HTML / CSS