前端生成pdf的效果不如后端生成的效果好,但也可以生成。
本文主要使用 jspdf+html2Canvas 实现html转pdf。 jspdf不支持中文 ,所以需要配合html2Canvas,先生成图片再转为pdf,就不用考虑中英文问题,但是会存在 分页 和 样式不友好 的问题
image
1、安装jspdf: npm install jspdf --save
2、安装html2Canvas: npm install --save html2canvas
这里使用 iframe 嵌套需要转成pdf的html文件;
如果pdf内容是动态的,可以将html丢给后端,让后端使用freemarker ftl模板语言或是啥其他的模板语言更改即可,然后将整个html作为字符串传给前端,前端再使用iframe 的 srcdoc属性将内容渲染出来。
image
不存在分页内容裂开的情况,但对样式呈现不太友好,有时会出现内容偏移情况,时好时坏的,经过不断的尝试,发生偏移的时候,可以将html2Canvas的width写死,但是值具体是多少,需要你自己猜
// 单页pdf:css高度自适应即可(此处用的一个css,为了实现多页pdf同时不让分页分割图片,css中写死了每页的高度.a4page)
getOnePdf() {
var title = "单页报告";
var dom = document.getElementById("pdf-container"); // 生成pdf的html内容
html2Canvas(dom, {
allowTaint: true,
scrollY: 0,
scrollX: 0,
useCORS: true, // 开启跨院
width: 1000, // 这个宽度,太扯淡了,固定1000,防止偏移!
height: dom.offsetHeight
}).then(function(canvas) {
var contentWidth = canvas.width;
var contentHeight = canvas.height;
var pdfWidth = (contentWidth + 10) / 2 * 0.75;
var pdfHeight = (contentHeight + 200) / 2 * 0.75; // 500为底部留白
var imgWidth = pdfWidth;
var imgHeight = contentHeight / 2 * 0.75; //内容图片这里不需要留白的距离
var pageData = canvas.toDataURL("image/jpeg", 1.0);
var pdf = new JsPDF("", "pt", [pdfWidth, pdfHeight]);
pdf.addImage(pageData, "jpeg", 0, 0, imgWidth, imgHeight);
pdf.save(title + ".pdf");
});
},
image
分页会出现问题:比如图片裂开,表格的某一行从中间断开了等等....我用的笨方法手动去调整iframe的宽、高+html2Canvas的width、height+contentWidth、contentHeight,一点点试出来合适的值(应该有更好的方法,但是技术有限)
// 多页pdf-转换后的样式需要手动调整iframe的宽、高+html2Canvas的width、height+contentWidth、contentHeight
getManyPdf() {
let _this = this;
var dom = document.getElementById("pdf-container"); // 生成pdf的html内容
html2Canvas(dom, {
allowTaint: true,
scrollY: 0,
scrollX: 0,
useCORS: true, // 开启跨院
width: 1000, // 这个宽度,太扯淡了,固定1000,防止偏移!
height: dom.offsetHeight
}).then(function(canvas) {
var contentWidth = 900; // 宽高写死,强制分页
var contentHeight = 5060;
//一页pdf显示html页面生成的canvas高度;
var pageHeight = contentWidth / 592.28 * 841.89;
//未生成pdf的html页面高度
var leftHeight = contentHeight;
//页面偏移
var position = 0;
//a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高
var imgWidth = 595.28;
var imgHeight = 3400; // 为了分页,所以写死。592.28 / contentWidth * contentHeight会导致图片被分割
var pageData = canvas.toDataURL("image/jpeg", 1.0);
var pdf = new JsPDF("", "pt", "a4");
//有两个高度需要区分,一个是html页面的实际高度,和生成pdf的页面高度(841.89)
//当内容未超过pdf一页显示的范围,无需分页
if (leftHeight < pageHeight) {
pdf.addImage(pageData, "JPEG", 0, 0, imgWidth, imgHeight);
} else {
while (leftHeight > 0) {
//arg3-->距离左边距;arg4-->距离上边距;arg5-->宽度;arg6-->高度
pdf.addImage(pageData, "JPEG", 0, position, imgWidth, imgHeight);
leftHeight -= pageHeight;
position -= 841.89;
//避免添加空白页
if (leftHeight > 0) {
pdf.addPage();
}
}
}
pdf.save(`多页报告}.pdf`);
});
}
<div class="home-index-container" style="width: 100%; height: 100%; overflow: auto">
<el-button @click="getOnePdf" type="primary">下载单页</el-button>
<el-button @click="getManyPdf" type="primary">下载多页</el-button>
<!-- 转Pdf的容器 -->
<div id="pdf-container">
<iframe src="/exportPDF/exportPDF.html" width="1000" height="5200"></iframe>
</div>
</div>
</template>
<script>
import html2Canvas from "html2canvas";
import JsPDF from "jspdf";
export default {
data() {
return {};
},
methods: {
// 单页pdf:css高度自适应即可(此处用的一个css,为了实现多页pdf同时不让分页分割图片,css中写死了每页的高度.a4page)
getOnePdf() {
var title = "单页报告";
var dom = document.getElementById("pdf-container"); // 生成pdf的html内容
html2Canvas(dom, {
allowTaint: true,
scrollY: 0,
scrollX: 0,
useCORS: true, // 开启跨院
width: 1000, // 这个宽度,太扯淡了,固定1000,防止偏移!
height: dom.offsetHeight
}).then(function(canvas) {
var contentWidth = canvas.width;
var contentHeight = canvas.height;
var pdfWidth = (contentWidth + 10) / 2 * 0.75;
var pdfHeight = (contentHeight + 200) / 2 * 0.75; // 500为底部留白
var imgWidth = pdfWidth;
var imgHeight = contentHeight / 2 * 0.75; //内容图片这里不需要留白的距离
var pageData = canvas.toDataURL("image/jpeg", 1.0);
var pdf = new JsPDF("", "pt", [pdfWidth, pdfHeight]);
pdf.addImage(pageData, "jpeg", 0, 0, imgWidth, imgHeight);
pdf.save(title + ".pdf");
});
},
// 多页pdf-转换后的样式需要手动调整iframe的宽、高+html2Canvas的width、height+contentWidth、contentHeight
getManyPdf() {
let _this = this;
var dom = document.getElementById("pdf-container"); // 生成pdf的html内容
html2Canvas(dom, {
allowTaint: true,
scrollY: 0,
scrollX: 0,
useCORS: true, // 开启跨院
width: 1000, // 这个宽度,太扯淡了,固定1000,防止偏移!
height: dom.offsetHeight
}).then(function(canvas) {
var contentWidth = 900; // 宽高写死,强制分页
var contentHeight = 5060;
//一页pdf显示html页面生成的canvas高度;
var pageHeight = contentWidth / 592.28 * 841.89;
//未生成pdf的html页面高度
var leftHeight = contentHeight;
//页面偏移
var position = 0;
//a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高
var imgWidth = 595.28;
var imgHeight = 3400; // 为了分页,所以写死。592.28 / contentWidth * contentHeight会导致图片被分割
var pageData = canvas.toDataURL("image/jpeg", 1.0);
var pdf = new JsPDF("", "pt", "a4");
//有两个高度需要区分,一个是html页面的实际高度,和生成pdf的页面高度(841.89)
//当内容未超过pdf一页显示的范围,无需分页
if (leftHeight < pageHeight) {
pdf.addImage(pageData, "JPEG", 0, 0, imgWidth, imgHeight);
} else {
while (leftHeight > 0) {
//arg3-->距离左边距;arg4-->距离上边距;arg5-->宽度;arg6-->高度
pdf.addImage(pageData, "JPEG", 0, position, imgWidth, imgHeight);
leftHeight -= pageHeight;
position -= 841.89;
//避免添加空白页
if (leftHeight > 0) {
pdf.addPage();
}
}
}
pdf.save(`多页报告}.pdf`);
});
}
},
created() {
},
mounted() {}
};
</script>
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。