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 相关文章推荐
jQuery功能函数详解
Feb 01 Javascript
js选项卡的实现方法
Feb 09 Javascript
javascript封装简单实现方法
Aug 11 Javascript
详解Js模板引擎(TrimPath)
Nov 22 Javascript
JS生成一维码(条形码)功能示例
Jan 19 Javascript
Javascript循环删除数组中元素的几种方法示例
May 18 Javascript
layui中layer前端组件实现图片显示功能的方法分析
Oct 13 Javascript
vue-resource拦截器设置头信息的实例
Oct 27 Javascript
js 数组详细操作方法及解析合集
Jun 01 Javascript
对angular 监控数据模型变化的事件方法$watch详解
Oct 09 Javascript
Vue实现拖放排序功能的实例代码
Jul 08 Javascript
用JS实现一个简单的打砖块游戏
Dec 11 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
追忆往昔!浅谈收音机的百年发展历史
2021/03/01 无线电
php使用fputcsv()函数csv文件读写数据的方法
2015/01/06 PHP
Yii实现显示静态页的方法
2016/04/25 PHP
php中类和对象:静态属性、静态方法
2017/04/09 PHP
利用jquery操作select下拉列表框的代码
2010/06/04 Javascript
利用腾讯的ip地址库做ip物理地址定位
2010/07/24 Javascript
jQuery ui实现动感的圆角渐变网站导航菜单效果代码
2015/08/26 Javascript
详解jQuery UI库中文本输入自动补全功能的用法
2016/04/23 Javascript
谈谈第三方App接入微信登录 解读
2016/12/27 Javascript
Angular4项目中添加i18n国际化插件ngx-translate的步骤详解
2017/07/02 Javascript
vue-music关于Player播放器组件详解
2017/11/28 Javascript
解决vue2 在mounted函数无法获取prop中的变量问题
2018/11/15 Javascript
微信小程序导航栏滑动定位功能示例(实现CSS3的positionsticky效果)
2019/01/24 Javascript
微信小程序云开发如何使用npm安装依赖
2019/05/18 Javascript
原生JS实现天气预报
2020/06/16 Javascript
JavaScript判断数据类型有几种方法及区别介绍
2020/09/02 Javascript
python3模块smtplib实现发送邮件功能
2018/05/22 Python
python 正确保留多位小数的实例
2018/07/16 Python
在Python中实现替换字符串中的子串的示例
2018/10/31 Python
浅谈Python 列表字典赋值的陷阱
2019/01/20 Python
详解python的argpare和click模块小结
2019/03/31 Python
pytorch在fintune时将sequential中的层输出方法,以vgg为例
2019/08/20 Python
通过实例解析python描述符原理作用
2020/01/22 Python
简单的HTML5初步入门教程
2015/09/29 HTML / CSS
html5借用repeating-linear-gradient实现一把刻度尺(ruler)
2019/09/09 HTML / CSS
德国汉莎航空中国官网: Lufthansa中国
2017/03/30 全球购物
Draper James官网:知名演员瑞茜·威瑟斯彭所创品牌
2017/10/25 全球购物
what is the difference between ext2 and ext3
2015/08/25 面试题
实习生求职自荐信
2014/02/07 职场文书
如何撰写一封出色的求职信
2014/04/27 职场文书
升职自我推荐信范文
2015/03/25 职场文书
教师节主题班会方案
2015/08/17 职场文书
2016中学教师读书心得体会
2016/01/13 职场文书
Python加密与解密模块hashlib与hmac
2022/06/05 Python
win10识别不了U盘怎么办 win10系统读取U盘失败的解决办法
2022/08/05 数码科技
JS前端轻量fabric.js系列之画布初始化
2022/08/05 Javascript