通过打印功能实现pdf的保存
/* 默认情况下，元素的背景色不会被打印，可通过设置属性来支持：*/
div {
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
color-adjust: exact;
}
const exportPdf = () => {
const fileName = `${reportDetail.value.title}`;
const htmlContent = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>${fileName}</title>
<style>
table {
background: #fff;
border: solid 1px #ddd;
margin-bottom: 1.25rem;
table-layout: auto;
border-collapse: collapse;
}
img{
width: 100%;
object-fit: contain;
}
table caption {
background: transparent;
color: #222;
font-size: 1rem;
font-weight: bold;
}
table thead tr th,
table thead tr td {
color: #222;
font-size: 0.875rem;
font-weight: bold;
padding: 0.5rem 0.625rem 0.625rem;
}
table tfoot tr th,
table tfoot tr td {
color: #222;
font-size: 0.875rem;
font-weight: bold;
padding: 0.5rem 0.625rem 0.625rem;
}
table tr th,
table tr td {
color: #222;
font-size: 0.875rem;
padding: 0.5625rem 0.625rem;
text-align: left;
}
table tr.even,
table tr.alt,
table tr:nth-of-type(even) {
// background: #f9f9f9;
}
table thead tr th,
table tfoot tr th,
table tfoot tr td,
table tbody tr th,
table tbody tr td,
table tr td {
// display: table-cell;
line-height: 1.125rem;
}
td, th {
border: 1px solid #ddd;
}
@media print {
table {
background: #fff;
border: solid 1px #ddd;
margin-bottom: 1.25rem;
table-layout: auto;
border-collapse: collapse;
}
img{
width: 100%;
object-fit: contain;
}
table caption {
color: re;
font-size: 1rem;
font-weight: bold;
}
table thead {
background-color: #f5f5f5;
}
table thead tr th,
table thead tr td {
color: #222;
font-size: 0.875rem;
font-weight: bold;
padding: 0.5rem 0.625rem 0.625rem;
}
table tfoot {
background: #f5f5f5;
}
table tfoot tr th,
table tfoot tr td {
color: #222;
font-size: 0.875rem;
font-weight: bold;
padding: 0.5rem 0.625rem 0.625rem;
}
table tr th,
table tr td {
color: #222;
font-size: 0.875rem;
padding: 0.5625rem 0.625rem;
text-align: left;
}
table tr.even,
table tr.alt,
table tr:nth-of-type(even) {
// background: #f9f9f9;
}
table thead tr th,
table tfoot tr th,
table tfoot tr td,
table tbody tr th,
table tbody tr td,
table tr td {
display: table-cell;
line-height: 1.125rem;
}
td, th {
border: 1px solid #ddd;
}
}
</style>
</head>
<body>
${reportDetail.value.content}
</body>
</html>
`;
// 使用Blob和URL.createObjectURL来创建一个可以访问的URL
const blob = new Blob([htmlContent], { type: 'text/html' });
const url = URL.createObjectURL(blob);
// 打开新窗口并设置其内容（注意：这种方法在某些浏览器中可能不起作用，因为出于安全考虑，现代浏览器限制了通过这种方式加载本地HTML）
let newWindow = window.open(url, '_blank', 'toolbar=yes,scrollbars=yes,resizable=yes'); // 打开一个新窗口或标签页
// newWindow.onload = ()=> {
newWindow.document.write(htmlContent); // 向新窗口写入HTML内容（在某些浏览器中可能不工作）
newWindow.document.close(); // 关闭文档流（在某些浏览器中可能不工作
newWindow.print();
// }
newWindow.close();
}
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
