vue前端实现导出页面为word(两种方法)

将vue页面导出为word文档，不用写模板，直接导出即可。

第一种方法(简单版)

第一步：安装所需依赖

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

第二步：创建容器，页面使用方法

注意：在当前页面引入依赖

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

第二种方法（需要使用jquery）

第一步：安装所需依赖

npm install jquery --savenpm install file-saver

第二步：创建两个js文件，一个是jquery文件(jq.js)，一个是插件js的文件(jquery.wordexport.js)，我把这两个js文件都放到utils文件夹下，注意：使用的时候一定要注意引用路径。这两个js文件代码我都放到文章最后（有一个插件没有依赖包，所以需要自己创建一个js文件（jquery.wordexport.js））

第三步：在需要导出的页面引入文件

import $ from "@/utils/jq"; // 文件引入路径一定要正确，这是第二步创建的js文件（jq.js）import saveAs from "file-saver/dist/FileSaver";import "@/utils/jquery.wordexport"; // 文件引入路径一定要正确，这是第二步创建的js文件(jquery.wordexport.js)

第三步：页面使用方法

注意：如果导出的时候出现bug，大多是因为index.php/tags-522.html" >文件路径引入有问题，再次排查路径引入

jq.js

import $ from "jquery";  window.$ = $;  window.jQuery = $;export default $;

jquery.wordexport.js

if (typeof jQuery !== "undefined" && typeof saveAs !== "undefined") {  (function ($) {      $.fn.wordExport = function (fileName) {          fileName = typeof fileName !== 'undefined' ? fileName : "jQuery-Word-Export";          var static = {              mhtml: {                  top:                    "Mime-Version: 1.0\nContent-Base: " +                    location.href +                    '\nContent-Type: Multipart/related; boundary="NEXT.ITEM-BOUNDARY";type="text/html"\n\n--NEXT.ITEM-BOUNDARY\nContent-Type: text/html; charset="utf-8"\nContent-Location: ' +                    location.href +                    "\n\n\n" +                    '\n_html_',                  head:                    '\n\n\n_styles_\n\n\n',                  body: "_body_",              },          };          var options = {              maxWidth: 624,//最大宽度          };          // Clone selected element before manipulating it          var markup = $(this).clone();          // Remove hidden elements from the output          markup.each(function () {              var self = $(this);              if (self.is(':hidden'))                  self.remove();          });          // Embed all images using Data URLs          var images = Array();          var img = markup.find('img');          // var img = new Image(); 用这一行的话，WPS不显示图片，用上面的——只兼容office Word。          var mhtmlBottom = "\n";          for (var i = 0; i