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 检测浏览器类型和版本的代码
Sep 15 Javascript
jQuery 核心函数以及jQuery对象
Mar 23 Javascript
基于jquery的仿百度搜索框效果代码
Apr 11 Javascript
jquery 插件开发 extjs中的extend用法小结
Jan 04 Javascript
引用外部js乱码问题分析及解决方案
Apr 12 Javascript
js获取某月的最后一天日期的简单实例
Jun 22 Javascript
jQuery checkbox选中问题之prop与attr注意点分析
Nov 15 Javascript
TypeScript入门-基本数据类型
Mar 28 Javascript
基于 Bootstrap Datetimepicker 联动
Aug 03 Javascript
JS实现利用两个队列表示一个栈的方法
Dec 13 Javascript
AngularJs返回前一页面时刷新一次前面页面的方法
Oct 09 Javascript
微信小程序返回上一页传参并刷新过程解析
Dec 13 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 Google的translate API代码
2008/12/10 PHP
php $_SERVER当前完整url的写法
2009/11/12 PHP
smarty模板引擎基础知识入门
2015/03/30 PHP
php实现判断访问来路是否为搜索引擎机器人的方法
2015/04/15 PHP
提高代码性能技巧谈—以创建千行表格为例
2006/07/01 Javascript
用js得到网页中所有的div的id
2020/10/19 Javascript
js下利用控制器载入对应脚本
2010/07/17 Javascript
jQuery Ajax 仿AjaxPro.Utility.RegisterTypeForAjax辅助方法
2011/09/27 Javascript
基于jquery的textarea发布框限制文字字数输入(添加中文识别)
2012/02/16 Javascript
基于jquery tab切换(防止页面刷新)
2012/05/23 Javascript
jquery中.add()的使用分析
2013/04/26 Javascript
Jquery事件的连接使用示例
2013/06/18 Javascript
Extjs单独定义各组件的实例代码
2013/06/25 Javascript
jQuery$命名冲突怎么办如何解决
2014/01/16 Javascript
javascript引用类型指针的工作方式
2015/04/13 Javascript
JavaScript将字符串转换为整数的方法
2015/04/14 Javascript
JavaScript统计网站访问次数的实现代码
2015/11/18 Javascript
jQuery表格插件datatables用法汇总
2016/03/29 Javascript
利用Jquery队列实现根据输入数量显示的动画
2016/09/01 Javascript
小程序如何使用分包加载的实现方法
2019/05/22 Javascript
JS数组扁平化(flat)方法总结详解
2019/06/24 Javascript
Vue2.0 实现页面缓存和不缓存的方式
2019/11/12 Javascript
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
2020/08/05 Javascript
JS如何操作DOM基于表格动态展示数据
2020/10/15 Javascript
JavaScript如何实现防止重复的网络请求的示例
2021/01/28 Javascript
python PIL模块与随机生成中文验证码
2016/02/27 Python
Pycharm技巧之代码跳转该如何回退
2017/07/16 Python
python matplotlib绘制三维图的示例
2020/09/24 Python
Python使用eval函数执行动态标表达式过程详解
2020/10/17 Python
python实现控制台输出颜色
2021/03/02 Python
什么是makefile? 如何编写makefile?
2013/01/02 面试题
和解协议书
2014/04/16 职场文书
主持人演讲稿
2014/05/13 职场文书
管理提升方案
2014/06/04 职场文书
公司大门门卫岗位职责
2014/06/11 职场文书
2016年3月份红领巾广播稿
2015/12/21 职场文书