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 相关文章推荐
ExtJS GridPanel 根据条件改变字体颜色
Mar 08 Javascript
使用javascript获取flash加载的百分比的实现代码
May 25 Javascript
jQuery根据纬度经度查看地图处理程序
May 08 Javascript
Jquery Mobile 自定义按钮图标
Nov 18 Javascript
探讨JavaScript标签位置的存放与功能有无关系
Jan 15 Javascript
jQuery 获取页面li数组并删除不在数组中的key
Aug 02 Javascript
JS简单实现无缝滚动效果实例
Aug 24 Javascript
js 实现获取name 相同的页面元素并循环遍历的方法
Feb 14 Javascript
vue.js实现简单轮播图效果
Oct 10 Javascript
element-ui组件table实现自定义筛选功能的示例代码
Mar 15 Javascript
Node.js 路由的实现方法
Jun 05 Javascript
Node.js API详解之 console模块用法详解
May 12 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中通过curl模拟登陆discuz论坛的实现代码
2012/02/16 PHP
php实现贪吃蛇小游戏
2016/07/26 PHP
php的instanceof和判断闭包Closure操作示例
2020/01/26 PHP
JavaScript 入门基础知识 想学习js的朋友可以参考下
2009/12/26 Javascript
jQuery中index()方法用法实例
2014/12/27 Javascript
jQuery里filter()函数与find()函数用法分析
2015/06/24 Javascript
javascript巧用eval函数组装表单输入项为json对象的方法
2015/11/25 Javascript
JavaScript弹窗基础篇
2016/04/27 Javascript
vue全局自定义指令-元素拖拽的实现代码
2019/04/14 Javascript
微信小程序实现手势滑动效果
2019/08/26 Javascript
微信小程序中网络请求缓存的解决方法
2019/12/29 Javascript
Python基于SMTP协议实现发送邮件功能详解
2018/08/14 Python
Python高级特性切片(Slice)操作详解
2018/09/27 Python
在python tkinter界面中添加按钮的实例
2020/03/04 Python
Python中remove漏删和索引越界问题的解决
2020/03/18 Python
Python 保存加载mat格式文件的示例代码
2020/08/04 Python
CSS3 简单又实用的5个属性
2010/03/04 HTML / CSS
HTML5 Canvas鼠标与键盘事件demo示例
2013/07/04 HTML / CSS
Html5移动端适配IphoneX等机型的方法
2019/06/25 HTML / CSS
iframe跨域的几种常用方法
2019/11/11 HTML / CSS
印度首选时尚目的地:Reliance Trends
2018/01/17 全球购物
美国亚马逊旗下时尚女装网店:SHOPBOP(支持中文)
2020/10/17 全球购物
银行会计职员个人的自我评价
2013/09/29 职场文书
餐饮主管岗位职责
2013/12/10 职场文书
小组合作学习反思
2014/02/18 职场文书
超市开业庆典策划方案
2014/05/14 职场文书
2014年入党积极分子学习三中全会思想汇报
2014/09/13 职场文书
“九一八事变纪念日”国旗下讲话稿
2014/09/14 职场文书
党员自我评价范文2015
2015/03/03 职场文书
2015年大学生暑期实习报告
2015/07/13 职场文书
ThinkPHP5和ThinkPHP6的区别
2021/03/31 PHP
两行代码解决Jupyter Notebook中文不能显示的问题
2021/04/24 Python
Windows11性能真的上涨35%? 桌面酷睿i9实测结果公开
2021/11/21 数码科技
Win11怎么启动任务管理器?Win11启动任务管理器的几种方法
2021/11/23 数码科技
mysql使用 not int 子查询隐含陷阱
2022/04/12 MySQL