Export html to word in vue

The latest project needs to fulfill a requirement, and the data is exported to a document in word format, so I went to github to find some ideas, and found a https://github.com/evidenceprime/html-docx-js at a glance , but now it seems to be in progress Not going, it should be necessary to climb over the wall;

Then talk about how to use html-docx-js to export word!

Step 1: Install the prerequisite packages:

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

file-saver is used to save files and must be installed.

Step Two: Use

Now import in the script as follows

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

method use:

//模板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');
    }

The above is my own project case. The actual situation is basically OK if I change it like this. One thing to say is that the css style may not take effect. I haven’t found the reason yet. It may be caused by some styles that are not supported and need to be used in practice. time to consider.

that's all!

Export html to word in vue

Guess you like