前端打印相关

1、方式一：后端提供打印文件，返回Blob格式数据，前端承接后直接转成对应文件即可
1） 前端直接调用后端接口，把blob文件转为url对象，拿到此对象后可以进行下载，打印和预览等操作

2） 下载

3） 打印
打印只需要将该url放入iframe后，拿到iframe的对象，调用print函数即可
4） 预览
直接window.open(url)
备注：由于该pdf比较花哨，后端java开发觉得太复杂，图片引入不进去（其实我认为应该可以引入的）；此方法废弃；但在实际开发中请前端优先使用该方法，避免浏览器兼容问题

2、方式二：.html + iframe，进行数据替换，内部写好css；
1） 将html字符串文件引入，引入后手动修改内容，修改完毕后填入iframe，进行打印

3、 方式三：.vue + printjs

1. 下载引入printjs；写好 .vue文件
2. 渲染后局部打印
   

项目总结：本次打印功能由预先的后端时间，转为前端实现，并且因为打印位置不一致，存在2，3两种打印方式；因为2需要html和替换过程，3需要.vue文件；在最快效率下（原先就有vue文件）；将方式三也引入本次项目；
技术总结：局部打印还得是printjs，printjs需要把css写入当前打印元素行内（html也差不多），否则打印结果css不生效

其他：
1、需要：打印的页眉文字需要改动
1） 修改文档title；该文档是指top文档的title，iframe里面的title不是最外层的
2） 直接删除页眉页脚(代码如下)，自己手动写个页眉上去

点击查看代码

<style>
  @page{
    margin: 0;
  }
</style>

顺便记录下下载相关内容

function downloadWord(row) { let a = document.createElement("a"); a.href = row.fileUrl; a.dispatchEvent(new MouseEvent("click")); } function downloadPdf(row) { const url = row.fileUrl; // const url = "http://10.6.94.21:5173/public/pdf/标准规范/xxx.pdf"; // const url = "http://10.6.94.21:5173/public/word/法律法规/xxx.docx"; const fileName = "123213213"; axios.get(url).then((res) => { console.log(typeof res.data); let blob = new Blob([res.data], { type: "application/pdf" }); const elelink = document.createElement("a"); elelink.style.display = "none"; elelink.download = fileName; elelink.href = window.URL.createObjectURL(blob); document.body.appendChild(elelink); elelink.click(); document.body.removeChild(elelink); }); }