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 相关文章推荐
js Event对象的5种坐标
Sep 12 Javascript
JS实现鼠标点击展开或隐藏表格行的方法
Mar 03 Javascript
jQuery 中msgTips 顶部弹窗效果实现代码
Aug 14 jQuery
vue基于Element构建自定义树的示例代码
Sep 19 Javascript
vue-cli 组件的导入与使用教程详解
Apr 11 Javascript
利用npm 安装删除模块的方法
May 15 Javascript
JavaScript作用域、闭包、对象与原型链概念及用法实例总结
Aug 20 Javascript
解决angularjs service中依赖注入$scope报错的问题
Oct 02 Javascript
JS遍历JSON数组及获取JSON数组长度操作示例【测试可用】
Dec 12 Javascript
jQuery访问json文件中数据的方法示例
Jan 28 jQuery
JavaScript实现的滚动公告特效【基于jQuery】
Jul 10 jQuery
详解利用eventemitter2实现Vue组件通信
Nov 04 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
虹吸壶煮咖啡26个注意事项
2021/03/03 冲泡冲煮
php面向对象全攻略 (十) final static const关键字的使用
2009/09/30 PHP
2个Codeigniter文件批量上传控制器写法例子
2014/07/25 PHP
Laravel 5框架学习之表单验证
2015/04/08 PHP
php封装的mongodb操作类代码
2017/08/06 PHP
通过PHP实现获取访问用户IP
2020/05/09 PHP
疯掉了,尽然有js写的操作系统
2007/04/23 Javascript
Javascript 陷阱 window全局对象
2008/11/26 Javascript
EXT中xtype的含义分析
2010/01/07 Javascript
用jquery生成二级菜单的实例代码
2013/06/24 Javascript
javascript实现des解密加密全过程
2014/04/03 Javascript
jQuery Ajax 加载数据时异步显示加载动画
2016/08/01 Javascript
jQuery焦点图轮播效果实现方法
2016/12/19 Javascript
基于MVC方式实现三级联动(JavaScript)
2017/01/23 Javascript
JavaScript时间戳与时间日期间相互转换
2017/12/11 Javascript
AngularJS使用$http配置对象方式与服务端交互方法
2018/08/13 Javascript
解决angular2 获取到的数据无法实时更新的问题
2018/08/31 Javascript
浅析Vue.js 中的条件渲染指令
2018/11/19 Javascript
Vue2.x Todo之自定义指令实现自动聚焦的方法
2019/01/08 Javascript
Vue实现日历小插件
2019/06/26 Javascript
js实现div色块拖动录制
2020/01/16 Javascript
JavaScript 获取滚动条位置并将页面滑动到锚点
2021/02/08 Javascript
[01:17:55]VGJ.T vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/20 DOTA
[05:26]TI10典藏宝瓶套装外观展示
2020/07/03 DOTA
python 实现一次性在文件中写入多行的方法
2019/01/28 Python
python导包的几种方法(自定义包的生成以及导入详解)
2019/07/15 Python
Django时区详解
2019/07/24 Python
Django框架 Pagination分页实现代码实例
2019/09/04 Python
Python使用文件操作实现一个XX信息管理系统的示例
2020/07/02 Python
python工具——Mimesis的简单使用教程
2021/01/16 Python
机关门卫制度
2014/02/01 职场文书
出纳试用期自我评价
2015/03/10 职场文书
建筑工程催款函
2015/06/24 职场文书
2015最新婚礼主持词
2015/06/30 职场文书
小学校长开学致辞
2015/07/29 职场文书
收音机爱好者玩机13年,简评其使用过的19台收音机
2022/04/30 无线电