js导出变量 vue_vue中jquery.wordexport.js将含echarts图表的HTML导出生成word文档

最新推荐文章于 2024-09-06 17:50:58 发布

shunan chen

最新推荐文章于 2024-09-06 17:50:58 发布

阅读量617

点赞数

文章标签： js导出变量 vue

本文链接：https://blog.csdn.net/weixin_35645701/article/details/112322345

版权

本文介绍了如何在Vue项目中利用jQuery和File-Saver库，实现从包含ECharts图表的HTML页面导出生成Word文档的解决方案。首先通过npm安装jquery和file-saver，接着全局引入或在HTML中引入jQuery库。然后在需要导出的组件中引入相关文件和依赖，最终实现文档导出功能。

摘要由CSDN通过智能技术生成

因公司业务需要，后端说是因为涉及到echarts表，java不方便，商量下来，生成文档放到前端来做。参考了网上的案例自己也走了写弯路。

在vue项目中使用jquery的第三方插件jquery.wordexport.js_MISS_CJL的博客-CSDN博客_jquery.wordexport.jsblog.csdn.net

1、安装依赖jquery

npm install jquery --save

然后进行全局引入，

或者在index.html中引入<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>

2、安装依赖file-saver

npm install file-saver --save

3、引入文件

 if (typeof jQuery !== "undefined" && typeof saveAs !== "undefined") {
  (function ($) {
    $.fn.wordExport = function (fileName, rule) {
      fileName = typeof fileName !== 'undefined' ? fileName : "jQuery-Word-Export";
      var statics = {
        mhtml: {
          top: "Mime-Version: 1.0nContent-Base: " + location.href + "nContent-Type: Multipart/related; boundary="NEXT.ITEM-BOUNDARY";type="text/html"nn--NEXT.ITEM-BOUNDARYnContent-Type: text/html; charset="utf-8"nContent-Location: " + location.href + "nn<!DOCTYPE html>n<html>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');
      for (var i = 0; i < img.length; i++) {
        // Calculate dimensions of output image
        var w = Math.min(img[i].width, options.maxWidth);
        var h = img[i].height * (w / img[i].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[i], 0, 0, w, h);
        // Get data URL encoding of image
        var uri = canvas.toDataURL("image/png/jpg");