最近在学习GitHub Action时想做一个CD(持续部署)就想到那就做一个工具吧,docx转HTML是一个不错的工具,经过搜索发现了mammoth这个库。
    image.png
    随后在README中发现有demo,跑了一下demo,没问题,可以在浏览器端进行docx到HTML的解析。
    image.png
    后续在demo的基础上加上了打印指定区域,然后转为pdf。

    我的做法是在页面中插入一个iframe,将转换后的HTML保存在iframe中,然后在iframe中调用浏览器提供的打印方法。

    1. const btn = document.querySelector("#print")
    2. btn.addEventListener("click", function () {
    3. print()
    4. })
    5. const iframe = document.createElement("iframe")
    6. iframe.style.display = "none"
    7. document.body.appendChild(iframe)
    8. function print() {
    9. const cp = document.querySelector(".span8").innerHTML
    10. iframe.contentWindow.window.document.body.innerHTML = cp
    11. try {
    12. iframe.contentWindow.window.print()
    13. } catch (error) {
    14. alert("打印发生了错误,请重试!")
    15. }
    16. }

    但是在测试过程中,发现在firefox中有问题,无法实现功能。

    后续修复这个问题的方法是页面初始化时,先在iframe中添加个textNode或者其他,总之不能让iframe是空的。

    1. setTimeout(() => { // fix firefox bug
    2. iframe.contentWindow.window.document.body.innerHTML = "mammoth.browser"
    3. })

    部署的仓库地址mammoth-deploy

    在线地址mammoth-deploy
    image.png
    fix: 今天我测试时,firefox在更新后,把这个问题修复了。