前言
这几天接到一个需求,富文本编辑器的内容不仅要展示出来,还要实现展示的内容导出pdf文件。一开始导出pdf的功能是由后端来做的,然后发现对于宽度太大的图片,导出的pdf文件里部分图片内容被遮盖了,但在前端是正常显示的,只因为class样式后端无法解析。然后,后端开发人员就嫌麻烦,让前端来实现导出pdf的功能。。。
html2canvas(V1.4.1)
html2canvas 用于将 html 元素渲染成图像,可以将整个页面或特定区域以图像形式进行捕获。这对于将复杂的 html 结构转换为 PDF 格式非常有用,因为它可以捕获 html 中的样式、布局和图像等细节。
官网:https://html2canvas.hertzen.com/
引用
npm install html2canvas@1.4.1 --save
或
yarn add html2canvas@1.4.1
或
<script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
示例
<template>
<div id="pdfBody" style="margin: 30px;">
<input class="test_input" type="text" autocomplete="off" placeholder="输入框111"/>
<input class="test_btn" id="testBtn" type="button" value="按钮"/>
</div>
</template>
<script>
import html2canvas from "@/utils/htmlToPdf/html2canvas.min";
export default {
name: "Test",
mounted() {
document.getElementById('testBtn').addEventListener('click', () => {
this.canvasTest();
});
},
methods: {
createCanvas(dom) {
html2canvas(dom, {
useCORS: true, //允许跨域
scale: 2, //按比例增加分辨率
dpi: 200, //将分辨率提高到特定的DPI(每英寸点数)
ignoreElements: (e) => {
//过滤head、body等无用的标签元素
return !(e.contains(dom) || dom.contains(e) || e.tagName === 'STYLE' || e.tagName === 'LINK');
},
onclone: (doc) => {
//Scoped CSS无法直接应用,需要手动处理
let inputDocArr = doc.getElementsByClassName('test_input');
[].forEach.call(inputDocArr, inputDoc => {
inputDoc.style.height = '36px';
inputDoc.style.lineheight = '36px';
inputDoc.style.width = '200px';
inputDoc.style.margin = '20px';
inputDoc.style.borderRadius = '5px';
inputDoc.style.border = '1px solid #DCDFE6';
});
let btnDocArr = doc.getElementsByClassName('test_btn');
[].forEach.call(btnDocArr, btnDoc => {
btnDoc.style.color = '#FFFFFF';
btnDoc.style.backgroundColor = '#1890ff';
btnDoc.style.border = '1px solid #1890ff';
btnDoc.style.height = '36px';
btnDoc.style.width = '80px';
btnDoc.style.borderRadius = '20px';
});
}
}).then(canvas => {
dom.appendChild(canvas);
}).finally(() => {
console.log('create canvas finish!');
});
},
canvasTest() {
let pdfBody = document.getElementById('pdfBody');
this.createCanvas(pdfBody);
}
}
}
</script>
<style scoped>
.test_input {
height: 36px;
line-heigh