1、需求描述:
表格预览页面,点击‘导出’按钮,导出pdf文件
2、解决方案:
-
通过
html2pdf
插件进行导出缺点:通过canvas转pdf,canvas的高度有限制(大概是
14400
),当页面数据过多时导出的文件内容都是空白;每页之间容易将内容截断 -
利用浏览器打印功能导出
优点:不限制内容高度,会自动分页内容不会被截断
3、解决方案代码: ``
//方案1:通过`html2pdf`插件进行导出
import { message } from 'antd';
import html2pdf from 'html2pdf.js';
import { reject } from 'lodash';
const exportPdf = (params = {}) =>
new Promise((resolve, reject) => {
const { filename = '', elementDom } = params;
if (!elementDom) {
message.error('导出失败,请重试!');
reject();
} else {
// jspdf.js 插件对单页面的最大宽高限制 为 14400
const limit = 14400;
const format = 'A4';
let scale = window.devicePixelRatio > 2 ? window.devicePixelRatio : 2; // 默认设备像素比
if (elementDom.offsetHeight > limit) {
// 各浏览器对canvas大小有限制,设置scale,把设备像素比设小尽可能显示多内容,如果数据实在过多,导出的pdf文件内容全是空白
scale = 1;
}
const opt = {
filename, // 导出的pdf的名字
image: { type: 'jpeg', quality: 1 }, // 用于生成PDF的图像类型和质量
html2canvas: {
scale,
width: elementDom.offsetWidth, // canvas的宽度
height: elementDom.offsetHeight, // canvas的宽度
useCORS: true, // 是否尝试使用CORS从服务器加载图像
},
jsPDF: {
orientation: 'p',
format: format.toLowerCase(),
pagesplit: true, // 页面纸张格式
},
};
const worker = html2pdf();
worker
.set(opt)
.from(elementDom)
.save()
.then(() => {
resolve();
});
}
}).catch(() => {
reject();
});
export { exportPdf };
//方案2:直接使用浏览器打印
document.execCommand('print') //调用浏览器打印
//注意:
1、body的高度不能写死,要由真正的内容去撑开;如果写死,则打印的内容高度就只有写死的高度;因为window打印是打印body内容
2、注意样式:
@media print {
INPUT {
display: none;
}
body {
overflow: auto !important;
}
}
4、其他:
- 预览页面时尽可能使用纯html去显示,因为预览页面一般只做展示交互较少,用纯html去编写能优化页面显示性能