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

1 、我们要添加两个模块

 第一个.将页面html转换成图片
npm install --save html2canvas
第二个.将图片生成pdf
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 =
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', , , imgWidth, imgHeight)
} else {
while (leftHeight > ) {
PDF.addImage(pageData, 'JPEG', , position, imgWidth, imgHeight)
leftHeight -= pageHeight
position -= 841.89
if (leftHeight > ) {
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: ,
canvas: c,
logging: true,
width: document.querySelector(dom).width,
height: document.querySelector(dom).height
};
c.width = document.querySelector(dom).width *
c.height = document.querySelector(dom).height *
c.getContext("2d").scale(, );
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 =
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', , , imgWidth, imgHeight)
} else {
while (leftHeight > ) {
PDF.addImage(pageData, 'JPEG', , position, imgWidth, imgHeight)
leftHeight -= pageHeight
position -= 841.89
if (leftHeight > ) {
PDF.addPage()
}
}
}
PDF.save(title + '.pdf')
}
)
}
}
}

vue实现pdf导出,解决生成canvas模糊等问题的更多相关文章

  1. 解决html5 canvas 绘制字体、图片与图形模糊问题

    html5 canvas 绘制字体.图片与图形模糊问题 发生情况 多出现在高dpi设备,这意味着每平方英寸有更多的像素,如手机,平板电脑.当然很多高端台式电脑也有高分辨率高dpi的显示器. canva ...

  2. jquery插件导出excel和pdf(解决中文乱码问题)

    参考文件:http://jackyrong.iteye.com/blog/2169683 https://my.oschina.net/aruan/blog/418980 https://segmen ...

  3. Java实现PDF和Excel生成和数据动态插入以及导出

    一.序言 Excel.PDF的导出.导入是我们工作中经常遇到的一个问题,刚好今天公司业务遇到了这个问题,顺便记个笔记以防下次遇到相同的问题而束手无策. 公司有这么两个需求: 需求一.给了一个表单,让把 ...

  4. Vue.js +pdf.js 处理响应pdf文件流数据,前端转图片预览不可下载

    使用场景及原因 实际业务中,一些说明书或协议仅支持用户在线预览,为避免用户自行下载,并进行修改,引发纠纷,特将文件已文件流的形式,传给前端并转为图片显示,此时可能会有人问,为什么不直接在后端转图片,前 ...

  5. Jasperreports以及iReport4.5报表PDF导出字体完美解决方案

    在使用Jasperreports以及iReport设计报表时,导出PDF是一个常见的需求.网上解决PDF导出中文显示问题相关的文章很多,无非就是设置控件的pdf font name和pdf encod ...

  6. iReport 5.6.0 PDF导出中文不显示问题 解决方案

    问题描述 iReport 5.6.0 PDF格式导出,中文不显示. 报错信息如下: Error exporting print... Could not load the following font ...

  7. vue将表格导出为excel

    vue将表格导出为excel 一:在项目中需要安装2个依赖项,如下命令: npm install --save file-saver xlsx 二:在vue文件中如下使用即可: <templat ...

  8. django生成文件txt、pdf(在生成 PDF 文件之前,需要安装 ReportLab 库)

    from django.http import HttpResponse def download_file(request): # Text file #response = HttpRespons ...

  9. java根据pdf模版动态生成pdf

    java根据pdf模版动态生成pdf package com.utils; import java.io.ByteArrayOutputStream; import java.io.File; imp ...

随机推荐

  1. 【总结整理】JQuery基础学习---DOM篇

    前言: 先介绍下需要用到的浏览器提供的一些原生的方法(这里不处理低版本的IE兼容问题) 创建流程比较简单,大体如下: 创建节点(常见的:元素.属性和文本) 添加节点的一些属性 加入到文档中 流程中涉及 ...

  2. Leetcode:206. Reverse Linked List

    这题直接ac掉 class Solution { public ListNode reverseList(ListNode head) { ListNode prev = null; while(he ...

  3. 新编html网页设计从入门到精通 (龙马工作室) pdf扫描版

    新编html网页设计从入门到精通共分为21章,全面系统地讲解了html的发展历史及4.0版的新特性.基本概念.设计原则.文件结构.文件属性标记.用格式标记进行页面排版.使用图像装饰页面.超链接的使用. ...

  4. 关于layui弹出层的使用

    Jquery必须大于1.83 layui必须是all,否则不显示 <script src="../js/jquery-1.8.3.min.js"></script ...

  5. Note: Differentially Private Access Patterns for Searchable Symmetric Encryption

    The Core Issues and Ideas of This Paper Problem Baseline Searchable Symmetric Encryption (SSE) could ...

  6. 小R的棋子

    小R的棋子(dp) 数轴上有 n 个位置可以摆放棋子,标号为1,2,3...n.小 R 现在要在一些位置摆放棋子,每个位置最多摆放一个棋子,摆放棋子的总数没有限制.小 R 不希望他摆放的棋子过于拥挤, ...

  7. 没有找零 状压dp

    没有找零 状压dp 约翰到商场购物,他的钱包里有K(1 <= K <= 16)个硬币,面值的范围是1..100,000,000.约翰想按顺序买 N个物品(1 <= N <= 1 ...

  8. puppet的一个Bug

    前篇文章写了使用puppet管理500多台服务器,当然只是一部分,最主要的还是puppet脚本的编写,这个我会在以后的文章中一点一点写出来. 今天要写的是puppet的一个bug,版本是puppet ...

  9. Hibernate的优化方案

    使用参数绑定 使用绑定参数的原因是让数据库一次解析SQL,对后续的重复请求可以使用生成好的执行计划,这样做节省CPU时间和内存. 避免SQL注入. 尽量少使用NOT 如果where子句中包含not关键 ...

  10. Flutter SDK的下载与安装步骤 (mac版)

    本月初(应该是2018年12月4日),Google在其Flutter Live 2018大会上正式发布 Flutter 1.0 版本. 当然我们不会怀疑Google团队的技术实力,但它和React N ...