vue实现pdf导出解决生成canvas模糊等问题(推荐)


Posted in Javascript onOctober 18, 2018

最近公司项目需要,利用vue实现pdf导出,从而保存到本地打印出来,说起来好像也很容易,具体要怎么实现呢?

1  、我们要添加两个模块

1 第一个.将页面html转换成图片
2 npm install --save html2canvas
3 第二个.将图片生成pdf
4 npm install jspdf --save

2 、定义全局函数 .. 创建一个htmlToPdf .js 文件在指定位置 . 我个人习惯放在 ( ' src /utils/htmlToPdf' )

// 导出页面为PDF格式
 import html2Canvas from 'html2canvas'
 import JsPDF from 'jspdf'
 export default{
  install (Vue, options) {
   Vue.prototype.getPdf = function () {
    var title = this.htmlTitle
    html2Canvas(document.querySelector('#pdfDom'), {
     allowTaint: true
    }).then(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(title + '.pdf')
    }
    )
   }
  }
 }

3 、在 main.js 中使用我们定义的函数文件。

import htmlToPdf from '@/components/utils/htmlToPdf'
 Vue.use(htmlToPdf)

4 、在需要的导出的页面 .. 调用我们的 getPdf 方法即可 .

<div class="row" id="pdfDom" style="padding-top: 55px;background-color:#fff;">
   //给自己需要导出的ui部分.定义id为"pdfDom".此部分将就是pdf显示的部分
 </div>
 <button type="button" class="btn btn-primary"v-on:click="getPdf()">导出PDF</button>
 export default {
  data () {
    return {
    htmlTitle: '页面导出PDF文件名'
    }
  }
 }

到这里大家会发现功能是可以实现了,但是会有个致命的问题,导出来的pdf打印出来还是比较模糊的,那么,针对这个问题,我们要怎么解决呢?

我们的思路是:将canvas的属性width和height属性放大为2倍,最后将canvas的css样式width和height设置为原来1倍的大小即可,也就是,先将canvas高分辨率输出,再来压缩导出打印,即可,废话不多说,完整代码如下:

// 导出页面为PDF格式
 import html2Canvas from 'html2canvas'
 import JsPDF from 'jspdf'
 export default{
  install (Vue, options) {
   Vue.prototype.getPdf = function (dom,title) {
    var title = title
    var c = document.createElement("canvas")
    var opts = {
     scale: 2, 
     canvas: c, 
     logging: true, 
     width: document.querySelector(dom).width, 
     height: document.querySelector(dom).height 
    };
    c.width = document.querySelector(dom).width * 2
    c.height = document.querySelector(dom).height * 2
    c.getContext("2d").scale(2, 2);
    html2Canvas(document.querySelector(dom), opts).then(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(title + '.pdf')
    }
    )
   }
  }
 }

总结

以上所述是小编给大家介绍的vue实现pdf导出解决生成canvas模糊等问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js 创建书签小工具之理论
Feb 25 Javascript
namespace.js Javascript的命名空间库
Oct 11 Javascript
jquery 页面滚动到指定DIV实现代码
Sep 25 Javascript
JS定时器实例详细分析
Oct 11 Javascript
JavaScript实现替换字符串中最后一个字符的方法
Mar 07 Javascript
[js高手之路]单例模式实现模态框的示例
Sep 01 Javascript
总结js函数相关知识点
Feb 27 Javascript
JavaScript实现的联动菜单特效示例
Jul 08 Javascript
vue自动化路由的实现代码
Sep 30 Javascript
javascript中的with语句学习笔记及用法
Feb 17 Javascript
JavaScript中的this基本问题实例小结
Mar 09 Javascript
vue总线机制(bus)知识点详解
May 10 Javascript
vue 指令之气泡提示效果的实现代码
Oct 18 #Javascript
使用JS获取页面上的所有标签
Oct 18 #Javascript
深入理解 Koa 框架中间件原理
Oct 18 #Javascript
JS实现十分钟倒计时代码实例
Oct 18 #Javascript
基于Vue实现可以拖拽的树形表格实例详解
Oct 18 #Javascript
JavaScript的词法结构精华篇
Oct 17 #Javascript
Javascript中parseInt的正确使用方式
Oct 17 #Javascript
You might like
分享一下贝贝成长进度的php代码
2012/09/14 PHP
php 表单提交大量数据发生丢失的解决方法
2014/03/03 PHP
php ci框架中加载css和js文件失败的原因及解决方法
2014/07/29 PHP
推荐一款MAC OS X 下php集成开发环境mamp
2014/11/08 PHP
php事务回滚简单实现方法示例
2017/03/28 PHP
ubutu 16.04环境下,PHP与mysql数据库,网页登录验证实例讲解
2017/07/20 PHP
redis+php实现微博(一)注册与登录功能详解
2019/09/23 PHP
laravel实现登录时监听事件,添加登录用户的记录方法
2019/09/30 PHP
浏览器常用高宽的jquery插件
2011/02/24 Javascript
javascript setTimeout和setInterval计时的区别详解
2013/06/21 Javascript
js遍历子节点子元素附属性及方法
2014/08/19 Javascript
Jquery弹出层插件ThickBox的使用方法
2014/12/09 Javascript
jquery表单对象属性过滤选择器实例分析
2015/05/18 Javascript
利用Angularjs和Bootstrap前端开发案例实战
2016/08/27 Javascript
利用JS提交表单的几种方法和验证(必看篇)
2016/09/17 Javascript
关于vue-resource报错450的解决方案
2017/07/24 Javascript
微信小程序用户位置权限的获取方法(拒绝后提醒)
2018/11/15 Javascript
js针对图片加载失败的处理方法分析
2019/08/24 Javascript
微信小程序动态设置图片大小的方法
2019/11/21 Javascript
[02:39]DOTA2国际邀请赛助威团西雅图第一天
2013/08/08 DOTA
haskell实现多线程服务器实例代码
2013/11/26 Python
TensorFlow深度学习之卷积神经网络CNN
2018/03/09 Python
python一键去抖音视频水印工具
2018/09/14 Python
解析python的局部变量和全局变量
2019/08/15 Python
Python3列表List入门知识附实例
2020/02/09 Python
html5嵌入内容_动力节点Java学院整理
2017/07/07 HTML / CSS
J2EE相关知识面试题
2013/08/26 面试题
寒假思想汇报
2014/01/10 职场文书
《月光启蒙》教学反思
2014/03/01 职场文书
民事起诉书范本
2015/05/19 职场文书
春风化雨观后感
2015/06/11 职场文书
大卫科波菲尔读书笔记
2015/06/30 职场文书
SpringBoot 拦截器妙用你真的了解吗
2021/07/01 Java/Android
Java基础——Map集合
2022/04/01 Java/Android
英国数字版游戏销量周榜公布 《小缇娜的奇幻之地》登顶
2022/04/03 其他游戏
Python如何使用循环结构和分支结构
2022/04/13 Python