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

王柳发表于 2024-6-14 18:54:49

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

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

第一种方法(简单版)

第一步：安装所需依靠

npm install html-docx-js -S
npm install file-saver -S
第二步：创建容器，页面使用方法

https://img-blog.csdnimg.cn/direct/2864513397044630a16c1e70e0795a61.png
注意：在当前页面引入依靠
import FileSaver from "file-saver";
import htmlDocx from "html-docx-js/dist/html-docx";**
第二种方法（必要使用jquery）

第一步：安装所需依靠

npm install jquery --save
npm 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)
第三步：页面使用方法

https://img-blog.csdnimg.cn/direct/00732db88020447fa469bbd6b071a3fc.png
注意：如果导出的时候出现bug，大多是因为文件路径引入有题目，再次排查路径引入
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<!DOCTYPE html>\n" +
               '<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40">\n_html_</html>',
               head:
               '<head>\n<meta http-equiv="Content-Type" content="text/html; charset=utf-8">\n<style>\n_styles_\n</style>\n</head>\n',
               body: "<body>_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 < img.length; i++) {
         // Calculate dimensions of output image
         var w = Math.min(img.width == 0 ? options.maxWidth : img.width, options.maxWidth);
         var h = (img.height == 0 ? options.defaultLength : img.height) * (w / (img.width == 0 ? options.maxWidth : img.width));

         // Create canvas for converting image to data URL
         var canvas = document.createElement("CANVAS");
         canvas.width = w;
         canvas.height = h;
         // Draw image to canvas
         var context = canvas.getContext('2d');
         context.drawImage(img, 0, 0, w, h);
         // Get data URL encoding of image
         var uri = canvas.toDataURL("image/png");
         // console.log(i+":"+uri);
         $(img).attr("src", img.src);
         img.width = w;
         img.height = h;

         mhtmlBottom += "--NEXT.ITEM-BOUNDARY\n";
         mhtmlBottom += "Content-Location: " + uri + "\n";
         mhtmlBottom += "Content-Type: " + uri.substring(uri.indexOf(":") + 1, uri.indexOf(";")) + "\n";
         mhtmlBottom += "Content-Transfer-Encoding: " + uri.substring(uri.indexOf(";") + 1, uri.indexOf(",")) + "\n\n";
         mhtmlBottom += uri.substring(uri.indexOf(",") + 1) + "\n\n";
      }

      mhtmlBottom += "--NEXT.ITEM-BOUNDARY--";

      //TODO: load css from included stylesheet
      var styles = "";

      // Aggregate parts of the file together
      var fileContent = static.mhtml.top.replace("_html_", static.mhtml.head.replace("_styles_", styles) + static.mhtml.body.replace("_body_", markup.html())) + mhtmlBottom;

      // Create a Blob with the file contents
      var blob = new Blob(, {
         type: "application/msword;charset=utf-8"
      });
      saveAs(blob, fileName + ".doc"); // 注意：不要改成docx，不然会打不开！！！

   };
})(jQuery);
} else {
if (typeof jQuery === "undefined") {
   console.error("jQuery Word Export: missing dependency (jQuery)");
}
if (typeof saveAs === "undefined") {
   console.error("jQuery Word Export: missing dependency (FileSaver.js)");
}
}

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

页: [1]

ToB企服应用市场:ToB评测及商务社交产业平台's Archiver

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