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 相关文章推荐
JavaScript 命名空间 使用介绍
Aug 29 Javascript
详解jquery中$.ajax方法提交表单
Nov 03 Javascript
jQuery老黄历完整实现方法
Jan 16 Javascript
jQuery实现数秒后自动提交form的方法
Mar 05 Javascript
JavaScript prototype属性详解
Oct 25 Javascript
JQuery和PHP结合实现动态进度条上传显示
Nov 23 Javascript
js实现下拉菜单效果
Mar 01 Javascript
ES6入门教程之let和const命令详解
May 17 Javascript
VueJs里利用CryptoJs实现加密及解密的方法示例
Apr 29 Javascript
Vue-CLI与Vuex使用方法实例分析
Jan 06 Javascript
深入浅析JavaScript中的in关键字和for-in循环
Apr 20 Javascript
从零开始在vue-cli4配置自适应vw布局的实现
Jun 08 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在apache环境下实现gzip配置方法
2015/04/02 PHP
php实现搜索一维数组元素并删除二维数组对应元素的方法
2015/07/06 PHP
使用WordPress发送电子邮件的相关PHP函数用法解析
2015/12/15 PHP
功能强大的php文件上传类
2016/08/29 PHP
Codeigniter里的无刷新上传的实现代码
2019/04/14 PHP
实现变速回到顶部的JavaScript代码
2011/05/09 Javascript
基于jQuery的输入框在光标位置插入内容, 并选中
2011/10/29 Javascript
javascript高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)
2012/08/22 Javascript
jquery Mobile入门—外部链接切换示例代码
2013/01/08 Javascript
js清理Word格式示例代码
2014/02/13 Javascript
在JavaScript中构建ArrayList示例代码
2014/09/17 Javascript
sencha ext js 6 快速入门(必看)
2016/06/01 Javascript
js实现消息滚动效果
2017/01/18 Javascript
JS生成一维码(条形码)功能示例
2017/01/19 Javascript
jquery实现图片放大点击切换
2017/06/06 jQuery
JavaScript函数中的this四种绑定形式
2017/08/15 Javascript
JavaScript实现简单图片轮播效果
2017/08/21 Javascript
javascript如何用递归写一个简单的树形结构示例
2017/09/06 Javascript
Angular.JS读取数据库数据调用完整实例
2019/07/02 Javascript
electron-vue开发环境内存泄漏问题汇总
2019/10/10 Javascript
JavaScript setInterval()与setTimeout()计时器
2019/12/27 Javascript
javascript运行机制之执行顺序理解
2020/08/03 Javascript
pyqt4教程之实现windows窗口小示例分享
2014/03/07 Python
在Python中操作字符串之replace()方法的使用
2015/05/19 Python
Python基础教程之正则表达式基本语法以及re模块
2016/03/25 Python
让IE支持HTML5的方法
2012/12/11 HTML / CSS
在线实验室测试:HealthLabs.com
2020/05/03 全球购物
大学生自我鉴定评语
2014/01/27 职场文书
环保专项行动方案
2014/05/12 职场文书
党员一帮一活动总结
2014/07/08 职场文书
妈妈活动方案
2014/08/15 职场文书
学校关爱留守儿童活动方案
2014/08/27 职场文书
2015年公务员试用期工作总结
2015/05/28 职场文书
公司环境卫生管理制度
2015/08/05 职场文书
golang 实现并发求和
2021/05/08 Golang
Python可视化神器pyecharts绘制地理图表
2022/07/07 Python