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 相关文章推荐
xml分页+ajax请求数据源+dom取结果实例代码
Oct 31 Javascript
javascript学习之闭包分析
Dec 02 Javascript
基于mootools插件实现遮罩层新手引导
May 24 Javascript
关于jQuery参考实例 1.0 jQuery的哲学
Apr 07 Javascript
JavaScript中使用Math.PI圆周率属性的方法
Jun 14 Javascript
JavaScript实现微信红包算法及问题解决方法
Apr 26 Javascript
react实现点击选中的li高亮的示例代码
May 24 Javascript
vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)
Aug 24 Javascript
使用ESLint禁止项目导入特定模块的方法步骤
Mar 04 Javascript
详解Bootstrap 学习(一)入门
Apr 12 Javascript
简单谈谈javascript高级特性
Sep 04 Javascript
如何使用 vue-cli 创建模板项目
Nov 19 Vue.js
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维护文件系统
2006/10/09 PHP
php实现上传图片生成缩略图示例
2014/04/13 PHP
php清除和销毁session的方法分析
2015/03/19 PHP
Yii框架表单提交验证功能分析
2017/01/07 PHP
详解php实现页面静态化原理
2017/06/21 PHP
详解Yaf框架PHPUnit集成测试方法
2017/12/27 PHP
ThinkPHP框架实现的邮箱激活功能示例
2018/06/15 PHP
PHP实现的DES加密解密类定义与用法示例
2020/11/02 PHP
laravel 验证错误信息到 blade模板的方法
2019/09/29 PHP
jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)
2013/01/23 Javascript
jq选项卡鼠标延迟的插件实例
2013/05/13 Javascript
jquery实现图片翻页效果
2013/12/23 Javascript
用jQuery实现的智能隐藏、滑动效果的返回顶部代码
2014/03/18 Javascript
jquery模拟进度条实现方法
2015/08/03 Javascript
JS简单实现多级Select联动菜单效果代码
2015/09/06 Javascript
全面详细的jQuery常见开发技巧手册
2016/02/21 Javascript
Vue.js展示AJAX数据简单示例讲解
2017/03/29 Javascript
AngularJS 验证码60秒倒计时功能的实现
2017/06/05 Javascript
浅谈angular4 ng-content 中隐藏的内容
2017/08/18 Javascript
JS设计模式之单例模式(一)
2017/09/29 Javascript
JS简单实现数组去重的方法分析
2017/10/14 Javascript
vue构建动态表单的方法示例
2018/09/22 Javascript
如何使用less实现随机下雪动画详解
2019/01/02 Javascript
vue项目中使用vue-i18n报错的解决方法
2019/01/13 Javascript
python操作MongoDB基础知识
2013/11/01 Python
关于numpy中eye和identity的区别详解
2019/11/29 Python
世界领先的艺术图书出版社:TASCHEN
2018/07/23 全球购物
北京RT科技有限公司.net工程师面试题
2013/02/15 面试题
求职信写作要突出重点
2014/01/01 职场文书
实习会计求职自荐信范文
2014/03/10 职场文书
物业保安员岗位职责
2014/03/14 职场文书
《金子》教学反思
2014/04/13 职场文书
给校长的建议书300字
2014/05/16 职场文书
2014迎国庆标语大全
2014/09/19 职场文书
DIV CSS实现网页背景半透明效果
2021/12/06 HTML / CSS
Python的property属性详细讲解
2022/04/11 Python