Vue使用printJS导出网页为pdf、printJS导出pdf、空白页解决、自定义页脚

在使用printJS导出Vue网页为PDF时，可能会遇到空白页的问题以及无法自定义页脚的问题。以下是解决这些问题的方法和示例代码：

1. 解决空白页问题：

   确保你的Vue组件模板中没有不需要打印的元素（如<script>标签、<style>标签等）。

   使用CSS控制不需要打印的元素，例如：

@media print {
  .no-print { display: none; }
}

2. 解决自定义页脚问题：

   使用printJS的style和css选项来添加自定义页脚。

示例代码：

import printJS from 'print-js';
 
// 导出时的配置
const printOptions = {
  type: 'html',
  style: '@page { size: auto;  margin: 20mm; } #footer { position: fixed; left: 0px; bottom: -20mm; height: 30mm; }',
  css: '#footer { width: 100%; text-align: center; font-size: smaller; }',
  targetStyles: ['*'],
  scanStyles: false,
  styleToAdd: 'margin-bottom: 50mm;',
  documentTitle: '导出文档标题',
  // 自定义页脚内容
  targetStyles: ['#footer'],
  replaceElement: [{
    id: 'footer',
    html: '<div id="footer">自定义页脚内容</div>'
  }]
};
 
// 导出操作
function exportPDF() {
  printJS({ printable: 'your-element-id', type: 'html', ...printOptions });
}
 
// 调用导出函数
exportPDF();

在上述代码中，printOptions对象包含了自定义页脚的样式和内容。style属性定义了页脚的位置和样式，css属性定义了页脚内容的样式，replaceElement数组用于替换页脚中的内容。

确保你的Vue模板中有一个元素的id是your-element-id，这个元素包含了你想要导出为PDF的内容。

注意：如果内容超出一页，页脚可能会出现在每一页的底部。如果你需要页脚仅出现在最后一页，你可能需要使用更复杂的CSS或JavaScript来控制页脚的位置。