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判断checkbox(复选框)是否被选中的代码
Oct 20 Javascript
range 标准化之获取
Aug 28 Javascript
javascript操作excel生成报表示例
May 08 Javascript
js的延迟执行问题分析
Jun 23 Javascript
技术男用来对妹子表白的百度首页
Jul 23 Javascript
JavaScript中的console.assert()函数介绍
Dec 29 Javascript
jquery实现图片左右切换的方法
May 07 Javascript
js实现当前输入框高亮显示的方法
Aug 19 Javascript
JS实现横向拉伸动感伸缩菜单效果代码
Sep 04 Javascript
深入浅析Vue.js计算属性和侦听器
May 05 Javascript
js监听html页面的上下滚动事件方法
Sep 11 Javascript
vue-cli 3.x配置跨域代理的实现方法
Apr 12 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将数据库中所有内容生成静态html文档的代码
2010/04/12 PHP
php生成短网址示例
2014/05/05 PHP
从零开始学YII2框架(一)通过Composer安装Yii2框架
2014/08/20 PHP
javascript Zifa FormValid 0.1表单验证 代码打包下载
2007/06/08 Javascript
用js写了一个类似php的print_r输出换行功能
2013/02/18 Javascript
javascript禁用键盘功能键让右击及其他键无效
2013/10/09 Javascript
JS使用for循环遍历Table的所有单元格内容
2014/08/21 Javascript
Bootstrap3.0学习教程之JS折叠插件
2016/05/27 Javascript
JS组件Bootstrap Select2使用方法解析
2016/05/30 Javascript
Vue.js如何优雅的进行form validation
2017/04/07 Javascript
深究AngularJS中$sce的使用
2017/06/12 Javascript
jquery animate动画持续运动的实例
2017/11/29 jQuery
一步快速解决微信小程序中textarea层级太高遮挡其他组件
2019/03/04 Javascript
Vue路由切换页面不更新问题解决方案
2020/07/10 Javascript
js实现菜单跳转效果
2020/12/11 Javascript
python连接MySQL、MongoDB、Redis、memcache等数据库的方法
2013/11/15 Python
Python中字符串的处理技巧分享
2016/09/17 Python
pycharm下打开、执行并调试scrapy爬虫程序的方法
2017/11/29 Python
Python3爬虫之urllib携带cookie爬取网页的方法
2018/12/28 Python
Python应用领域和就业形势分析总结
2019/05/14 Python
Python中请不要再用re.compile了
2019/06/30 Python
Python制作微信好友背景墙教程(附完整代码)
2019/07/17 Python
Tensorflow实现神经网络拟合线性回归
2019/07/19 Python
Python通过VGG16模型实现图像风格转换操作详解
2020/01/16 Python
美国从事品牌鞋类零售的连锁店:Famous Footwear
2016/08/25 全球购物
香港连卡佛百货官网:Lane Crawford
2019/09/04 全球购物
口腔工艺技术专业毕业生自荐信
2013/09/27 职场文书
个人简历中的自我评价怎么写
2014/01/26 职场文书
校优秀毕业生主要事迹
2014/05/26 职场文书
怎样写离婚协议书
2014/09/10 职场文书
2014年国庆节演讲稿精选范文1500字
2014/09/25 职场文书
警察群众路线对照检查材料思想汇报
2014/10/01 职场文书
党的群众路线教育实践活动党员个人整改措施
2014/10/27 职场文书
2014年汽车销售工作总结
2014/12/01 职场文书
小学教师工作总结2015
2015/04/07 职场文书
环境保护宣传标语大全!
2019/06/28 职场文书