vue导出pdf,分页被截断 ,图片不显示的问题,已解决。
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue导出pdf,分页被截断 ,图片不显示的问题,已解决。相关的知识,希望对你有一定的参考价值。
参考技术A import html2Canvas from "html2canvas";import JsPDF from "jspdf";
function printOut(DomName)
console.log("正在帮您导出......")
//title,随意设置,也可以提出来做参数,传入进来,自己发挥
var title = '测试啊';
var that = this;
var shareContent = DomName; //需要截图的包裹的(原生的)DOM 对象
//打印看有没有获取到dom
console.log(shareContent)
var width = shareContent.offsetWidth; //获取dom 宽度
var height = shareContent.offsetHeight; //获取dom 高度
var canvas = document.createElement("canvas"); //创建一个canvas节点
var scale = 2; //定义任意放大倍数 支持小数
canvas.width = width * scale; //定义canvas 宽度 * 缩放,在此我是把canvas放大了2倍
canvas.height = height * scale; //定义canvas高度 *缩放
canvas.getContext("2d").scale(scale, scale); //获取context,设置scale
html2Canvas(DomName,
//允许跨域图片的加载
useCORS: true,
).then(function (canvas)
var context = canvas.getContext("2d");
// 【重要】关闭抗锯齿
context.mozImageSmoothingEnabled = false;
context.webkitImageSmoothingEnabled = false;
context.msImageSmoothingEnabled = false;
context.imageSmoothingEnabled = false;
var imgData = canvas.toDataURL('image/', 1.0); //转化成base64格式,可上网了解此格式
var img = new Image();
img.src = imgData;
img.onload = function ()
img.width = img.width / 2; //因为在上面放大了2倍,生成image之后要/2
img.height = img.height / 2;
img.style.transform = "scale(0.5)";
if (this.width > this.height)
//此可以根据打印的大小进行自动调节
var doc = new JsPDF("l", "mm", [
this.width * 0.555,
this.height * 0.555
]);
else
var doc = new JsPDF("p", "mm", [
this.width * 0.555,
this.height * 0.555
]);
doc.addImage(
imgData,
"jpeg",
10,
0,
this.width * 0.505,
this.height * 0.545
);
doc.save(title + "-文件.pdf");
console.log("倒数3秒导出啦")
;
);
//导出方法
export
printOut
前端使用vue实现导出pdf
1、使用html2canvas和jspdf插件实现
这个方式是通过html2canvasl来把html页面转换成图片,然后再通过jspdf将图片转换为pdf文件
(1)缺点
生成的pdf质量不高,画面有些模糊,失真严重
如果在分页的地方有图片的话,可能会把图片也给你一分为二了
(2)安装插件
npm install --save html2canvas
npm install jspdf --save
(3)创建 htmlToPdf.js 文件
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default
install (Vue, options)
Vue.prototype.getPdf = function (idStr, title)
html2Canvas(document.querySelector('#' + idStr),
// allowTaint: true,
useCORS: true,
// scale: 2, // 提升画面质量,但是会增加文件大小
).then((canvas) =>
const contentWidth = canvas.width
const contentHeight = canvas.height
/* 导出不分页处理 */
const pageData = canvas.toDataURL('image/jpeg', 1.0)
const pdfWidth = (contentWidth + 10) / 2 * 0.75
const pdfHeight = (contentHeight + 200) / 2 * 0.75 // 500为底部留白
const imgWidth = pdfWidth
const imgHeight = (contentHeight / 2 * 0.75) // 内容图片这里不需要留白的距离
const PDF = new JsPDF('', 'pt', [ pdfWidth, pdfHeight, ])
PDF.addImage(pageData, 'jpeg', 0, 0, imgWidth, imgHeight)
PDF.save(title + '.pdf')
)
,
(4)在项目文件中的 main.js 里面引入,并注册
import htmlToPdf from '@/scripts/common/utils/htmlToPdf'
Vue.use(htmlToPdf)
(5)在你要导出的页面中,给你要导出的那个部分 加一个id名字
<div id="pdfDom">
//给自己需要导出的ui部分.定义id为"pdfDom".此部分将就是pdf显示的部分
</div>
<el-button @click="export">导出PDF</el-button>
(6)然后 在methods 里面声明点击事件,在return里给他一个导出的名字,这就ok啦
export default
data ()
return
fileName: '页面导出PDF文件名'
methods:
export ()
this.getPdf('pdfDom', this.fileName)
以上是关于vue导出pdf,分页被截断 ,图片不显示的问题,已解决。的主要内容,如果未能解决你的问题,请参考以下文章
freemarker 转 pdf 表格分页被截断分页标记和中文不显示问题