首页 > 其他分享> > vue中html导出到word

vue中html导出到word

2021-04-19 09:04:48 作者：互联网

最新项目要实现个需求，数据导出到word格式的文档，所以就上github上找点思路，一看就发现了一个https://github.com/evidenceprime/html-docx-js，但是现在貌似进不去了，应该是需要翻墙了；

那就说说怎么使用html-docx-js来导出word吧！

第一步：安装必备包：

npm install html-docx-js -S
npm install file-saver -S

file-saver是用来保存文件的，也是必须安装的。

第二步：使用

现在script中导入，如下所示

import FileSaver from 'file-saver'
import htmlDocx from "html-docx-js/dist/html-docx"

方法使用：

//模板word导出
    exportWordTpl() {
        let contentHtml = document.getElementById("exportBox").innerHTML
      let cssHTML = `
    table {
    width: 100%;
    table-layout: fixed;
    margin-top:10px;
    border: 1px solid #ddd;
    border-collapse: collapse;
    }
    .export-tb .thead td {
    font-weight: bold;
    }
    td {
    border: 1px solid #ddd;
    color: #333;
    text-align: left;
    padding: 6px 10px;
    }
    `
      let content = `<!DOCTYPE html><html>
            <head>
                <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
                <style>
                    ${cssHTML}
                </style>
            </head>
            <body>
                ${contentHtml}
            </body>
            </html>`;
      let converted = htmlDocx.asBlob(content);
      FileSaver.saveAs(converted, '模块汇总表.docx');
    }

以上是我自己的项目案例，实际情况就按这样改基本就OK了，有一点要说的是，css样式可能不一定生效，我具体还没找到原因，可能有些样式不支持导致，需要实际使用的时候斟酌。

以上！

标签：docx,vue,word,saver,js,html,let
来源： https://blog.csdn.net/playboyanta123/article/details/115855767