前端生成pdf的效果不如后端生成的效果好，但也可以生成。
本文主要使用jspdf+html2Canvas实现html转pdf。jspdf不支持中文，所以需要配合html2Canvas，先生成图片再转为pdf，就不用考虑中英文问题，但是会存在分页和样式不友好的问题
一、前期准备
image
1、安装jspdf: npm install jspdf --save
2、安装html2Canvas: npm install --save html2canvas
二、代码
1. html
这里使用iframe嵌套需要转成pdf的html文件；
如果pdf内容是动态的，可以将html丢给后端，让后端使用freemarker ftl模板语言或是啥其他的模板语言更改即可，然后将整个html作为字符串传给前端，前端再使用iframe 的 srcdoc属性将内容渲染出来。
image
2. 生成单页
不存在分页内容裂开的情况，但对样式呈现不太友好，有时会出现内容偏移情况，时好时坏的，经过不断的尝试，发生偏移的时候，可以将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
3. 生成多页
分页会出现问题：比如图片裂开，表格的某一行从中间断开了等等....我用的笨方法手动去调整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>
遗留问题
1. 生成多页pdf，分页内容裂开的问题
网友评论