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 相关文章推荐
在IE下:float属性会影响offsetTop的取值
Dec 22 Javascript
以JSON形式将JS中Array对象数组传至后台的方法
Jan 06 Javascript
JavaScript 学习笔记之语句
Jan 14 Javascript
JSONObject使用方法详解
Dec 17 Javascript
使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法
Mar 22 Javascript
javacript获取当前屏幕大小
Jun 04 Javascript
JavaScript提升性能的常用技巧总结【经典】
Jun 20 Javascript
对Angular中单向数据流的深入理解
Mar 31 Javascript
Windows下Node爬虫神器Puppeteer安装记
Jan 09 Javascript
Node.js 中判断一个文件是否存在
Aug 24 Javascript
vue3.0 上手体验
Sep 21 Javascript
uniapp实现可以左右滑动导航栏
Oct 21 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
Re:从零开始的异世界生活 第2季 开播啦
2020/07/24 日漫
PHP中register_globals参数为OFF和ON的区别(register_globals 使用详解)
2012/02/05 PHP
PHP与SQL语句常用大全
2016/12/10 PHP
jQuery+css+html实现页面遮罩弹出框
2013/03/21 Javascript
微信JSSDK上传图片
2015/08/23 Javascript
日常收集整理的JavaScript常用函数方法
2015/12/10 Javascript
node.js微信公众平台开发教程
2016/03/04 Javascript
利用ES6语法重构React组件详解
2017/03/02 Javascript
vue.js给动态绑定的radio列表做批量编辑的方法
2018/02/28 Javascript
vue中实现图片和文件上传的示例代码
2018/03/16 Javascript
详解SPA中前端路由基本原理与实现方式
2018/09/12 Javascript
记录一次完整的react hooks实践
2019/03/11 Javascript
Javascript 对象(object)合并操作实例分析
2019/07/30 Javascript
vue内置组件component--通过is属性动态渲染组件操作
2020/07/28 Javascript
HTML元素拖拽功能实现的完整实例
2020/12/04 Javascript
[05:49]2014DOTA2TI4正赛第二日综述 昔日冠军纷纷落马 VG LGD占尽先机
2014/07/20 DOTA
Python使用metaclass实现Singleton模式的方法
2015/05/05 Python
Python类的动态修改的实例方法
2017/03/24 Python
python3.5 tkinter实现页面跳转
2018/01/30 Python
解决Python计算矩阵乘向量,矩阵乘实数的一些小错误
2019/08/26 Python
windows 10 设定计划任务自动执行 python 脚本的方法
2019/09/11 Python
Spring实战之使用util:命名空间简化配置操作示例
2019/12/09 Python
python操作yaml说明
2020/04/08 Python
基于python实现百度语音识别和图灵对话
2020/11/02 Python
python 中 .py文件 转 .pyd文件的操作
2021/03/04 Python
严选全球尖货,立足香港:Bonpont宝盆
2018/07/24 全球购物
美国亚马逊旗下男装网站:East Dane(支持中文)
2019/09/25 全球购物
总经理办公室主任岗位职责
2013/11/12 职场文书
同事吵架检讨书
2014/02/05 职场文书
优秀团支部事迹材料
2014/02/08 职场文书
家长会学生演讲稿
2014/04/26 职场文书
农业项目建议书
2014/08/25 职场文书
简单的离婚协议书范本
2014/11/16 职场文书
2015出纳试用期工作总结
2014/12/12 职场文书
4S店客服专员岗位职责
2015/04/07 职场文书
党员心得体会范文2016
2016/01/23 职场文书