vue文件导出为word

733 阅读1分钟

项目有个需求就是导出页面为word文件。 以下是实现:
技术实现:fileSaver.js+html-docx-js
1、依赖 如果报错使用cnpm试试

npm install --save html-docx-js

npm install --save file-saver

2、导入

import htmlDocx from 'html-docx-js/dist/html-docx'

import saverFile from 'file-saver

3、代码部分

<div id="pcContract" class="text"> 内容XXXXX </div>

// 导出
function downLoad() {
  let htmls = document.getElementById('pcContract'); // 获取需要导出的标签
  let allDomObj = htmls.cloneNode(true);
  exec(allDomObj.innerHTML.toString()); // 导出的方法
}
function exec(htmls) {
  let page =
    `<!DOCTYPE html>
              <html lang="en">
                <head>
                  <meta charset="utf-8">
                  <meta http-equiv="X-UA-Compatible" content="IE=edge">
                  <meta name="viewport" content="width=device-width,initial-scale=1.0">
                  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
                  <title><%= htmlWebpackPlugin.options.title %></title>
                </head>
                <body>
                  <div id="app"> ` +
    htmls +
    ` </div>
                </body>
            </html>
            `;
  let converted = htmlDocx.asBlob(page);
  saverFile(converted, '模板.docx');
}

ok,这样就可以导出了,之前还尝试了另一种方法,可能打开方式不对,就看到了这个。 原文链接:codeleading.com/article/918…