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 MD4
Dec 20 Javascript
刷新时清空文本框内容的js代码
Apr 23 Javascript
javascript 对表格的行和列都能加亮显示
Dec 26 Javascript
js中匿名函数的创建与调用方法分析
Dec 19 Javascript
jQuery+PHP实现动态数字展示特效
Mar 14 Javascript
JavaScript实现的背景自动变色代码
Oct 17 Javascript
Node.js文件操作方法汇总
Mar 22 Javascript
AngularJS压缩JS技巧分析
Nov 08 Javascript
详解基于angular-cli配置代理解决跨域请求问题
Jul 05 Javascript
深入浅出webpack之externals的使用
Dec 04 Javascript
小程序组件之仿微信通讯录的实现代码
Sep 12 Javascript
layui--select使用以及下拉框实现键盘选择的例子
Sep 24 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
php数字游戏 计算24算法
2012/06/10 PHP
php笔记之:AOP的应用
2013/04/24 PHP
Yii2.0框架模型多表关联查询示例
2019/07/18 PHP
使javascript也能包含文件
2006/10/26 Javascript
JavaScript是否可实现多线程  深入理解JavaScript定时机制
2009/12/22 Javascript
JavaScript DOM 学习第五章 表单简介
2010/02/19 Javascript
浅谈jQuery中 wrap() wrapAll() 与 wrapInner()的差异
2014/11/12 Javascript
jquery 实现输入邮箱时自动补全下拉提示功能
2015/10/04 Javascript
整理Javascript数组学习笔记
2015/11/29 Javascript
JS在onclientclick里如何控制onclick的执行
2016/05/30 Javascript
详解JavaScript的闭包、IIFE、apply、函数与对象
2016/12/21 Javascript
Javascript中document.referrer隐藏来源的方法
2017/01/16 Javascript
React + webpack 环境配置的方法步骤
2017/09/07 Javascript
Vue  webpack 项目自动打包压缩成zip文件的方法
2019/07/24 Javascript
[03:59]第二届DOTA2亚洲邀请赛选手传记-VGJ.rOtk
2017/04/03 DOTA
[01:18:31]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第一场 1月10日
2021/03/11 DOTA
Python+Socket实现基于UDP协议的局域网广播功能示例
2017/08/31 Python
python实现雨滴下落到地面效果
2018/06/21 Python
Python中存取文件的4种不同操作
2018/07/02 Python
opencv导入头文件时报错#include的解决方法
2019/07/31 Python
如何在VSCode上轻松舒适的配置Python的方法步骤
2019/10/28 Python
Django Channel实时推送与聊天的示例代码
2020/04/30 Python
python实例化对象的具体方法
2020/06/17 Python
一文详述 Python 中的 property 语法
2020/09/01 Python
5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)
2016/08/15 HTML / CSS
trivago美国:全球最大的酒店价格比较网站
2018/01/18 全球购物
印尼在线购买隐形眼镜网站:Lensza.co.id
2019/04/27 全球购物
电气工程及自动化专业自荐书范文
2013/12/18 职场文书
政法大学毕业生自荐信范文
2014/01/01 职场文书
警察正风肃纪剖析材料
2014/10/16 职场文书
成绩单评语
2015/01/04 职场文书
5.12护士节活动总结
2015/02/10 职场文书
自荐信怎么写
2015/03/04 职场文书
会议主持词结束语
2015/07/03 职场文书
捐款仪式主持词
2015/07/04 职场文书
小学数学教学随笔
2015/08/14 职场文书