vue導出word和excel插件

一導出world

import $ from "jquery";
// import saveAs from "../../../assets/js/FileSaver" ,報錯這個依耐必須npm包才正確，如下;
import saveAs from 'file-saver' //這個也不用引入，因為htmldocx2引入了這個依耐包
// jquery和saveAs是下面兩種插件【wordexport，htmldocx2】的共同依耐包，所以必須引入，不同的是htmldocx2可以對cavas進行解析
import wordexport from  "../../../assets/js/jquery.wordexport";
//htmldocx是htmldocx2的依耐包。htmldocx2是自己根據第三方包改造的，因為本身第三方插件不支持echart導出圖形 改造后里面會引入第三方包htmldocx
而且html-docx-js本身是在node環境下引入的 但是可以把打包代碼引入過來放到本地的文件去引入這個依耐

//import htmldocx from 'html-docx-js'
import htmldocx2 from  "../../../assets/js/htmldocx";//這個文件是自己在原來插件的基礎上進行改寫已達到能導出echart圖形的目的，借鑒的別人寫的
// 注，如果在外面使用 注意jquery 要初始化 不然不會響應
  // $("#btn-word").click(function(event) {
  //   $('.content').wordExport('生成文檔')   
  // });

// 第一種html2docx插件的使用修改源碼
$(function(){
  $('#btn-word').on('click',function(){$('.content').html2docx('文檔')})
})

//第二種 wordexport插件的使用
jQuery(document).ready(function($) {
     console.log(12)

  $("#btn-word").click(function(event) {
    $('.content').wordExport('生成文檔')   
  });
});

Jq方法  markup.find('div.chart[_echarts_instance_]').has('canvas,svg').each(function () {
Clone（true）:包括克隆元素的方法的存儲數據
還有一種方法 未測試，網址如下 ：
https://www.jianshu.com/p/529550d32b6d?tdsourcetag=s_pcqq_aiomsg

/*
 * HTML內容生成docx文檔（基於：https://github.com/evidenceprime/html-docx-js）
 * 本插件只用於作者參與的項目，未經許可請勿轉載
 */

/* global htmlDocx, saveAs, html2canvas */
import echarts from 'echarts'
import saveAs from './FileSaver'
// const htmlDocx=require ('./html-docx.js')
// 解決不能引入問題 掛載在全局widow對象上
import htmlDocx from './html-docx.js'


(function ($) {
    // 'use strict'
    $.fn.html2docx = function (filename,option) {
      console.log(window,saveAs,filename,option)
      var option =option
      if ($(this).length) {
        filename = filename || '未命名'
        var ImageMaxWidth = 620
        var imgscount = 0
        var markup = null
        var $this = $(this).first()
        if (typeof layer !== 'undefined') { layer.msg('正在生成，請稍候...', { icon: 16, time: 0, shade: [0.1, '#000'] }) }
        else if (typeof AMUI === 'object') { $('#btn-word').prop('disabled', true).find('i').attr('class', 'am-icon-circle-o-notch am-icon-spin') }
        else { $('#btn-word').prop('disabled', true).data('value', $('#btn-word').val()).val('請稍候...') }
  
        // 裝載基礎腳本
        var deferreds = []
        
        // if (typeof saveAs === 'undefined') { deferreds.push($.ajax('//lib.baomitu.com/FileSaver.js/1.3.3/FileSaver.min.js', { dataType: 'script', cache: true })) }
        // if (typeof htmlDocx === 'undefined') { deferreds.push($.ajax('//cdn.psy.com.cn/scripts/html-docx.js', { dataType: 'script', cache: true })) }
        if ($this.find('svg').length && typeof html2canvas === 'undefined') { deferreds.push($.ajax('//cdn.psy.com.cn/scripts/html2canvas.min.js', { dataType: 'script', cache: true })) }
        $.when.apply(null, deferreds).done(makedocx0)
        // makedocx0()
        // console.log(deferreds,$.ajax('//cdn.psy.com.cn/scripts/html-docx.js.', { dataType: 'script', cache: true }))
      }
  
      return this
      // 處理svg元素，由於異步所以分離
      function makedocx0 () {
        var svgs = $this.find('svg')
        if (svgs.length) {
          console.log(1111)
          var deferreds = []
          svgs.each(function () {
            var svg = $(this)
            deferreds.push(
              html2canvas(this).then(function (canvas) {
                svg.after('<img src="' + canvas.toDataURL('image/png') + '">')
                svg.remove()
              })
            )
          })
          $.when.apply(null, deferreds).done(makedocx1)
        }
        else {
          console.log(1111)

          makedocx1()
        }
      }
  
      // 生成docx：處理
      function makedocx1 () {
        // 克隆
        markup = $this.clone(true)
        console.log($this)
  
        // 移除某些節點
        markup.find('iframe,embed,style').remove()
        markup.contents().each(function () {
          var $this = $(this)
          if (this.nodeType === 8 || $this.is('input[type="hidden"]') || $this.is('.word-hidden') || $this.is('.no-word')) { $this.remove() }
        })
  
        // 處理圖片
        var imgs = markup.find('img')
        imgscount = imgs.length
        console.log(imgscount)
        if (imgscount === 0) { makedocx2() }
        else {
          var canvas = document.createElement('canvas')
          var ctx = canvas.getContext('2d')
          imgs.each(function () {
            var $img = $(this)
            var src = $img.attr('src')
            // 原來的對應圖片
            var img = $this.find('img[src="' + src + '"]').get(0)
            // 已經是base64編碼的圖片不再處理
            if (src.indexOf('data:') === 0) { makedocx2() }
            else {
              var w = Math.min(img.width, ImageMaxWidth)
              // 只處理寬度大於0的
              if (w === 0) {
                $img.remove()
                makedocx2()
              }
              else {
                var h = img.height * (w / img.width)
                var a = document.createElement('a')
                var dataURL = ''
                a.href = src
                // 同源
                if (a.host === window.location.host) {
                  ctx.clearRect(0, 0, canvas.width, canvas.height)
                  canvas.width = w
                  canvas.height = h
                  ctx.drawImage(img, 0, 0, w, h)
                  dataURL = canvas.toDataURL()
                  $img.attr('src', dataURL).removeAttr('width')
                  makedocx2()
                }
                // 外站
                else {
                  // 獲取base64
                  var url = ''
                  src = src.replace(/^(http:\/\/|https:\/\/|\/\/)/gi, '')
                  if (a.host === 'images.weserv.nl') { url = src + '&encoding=base64' }
                  else { url = '//images.weserv.nl/?url=' + src + '&w=' + w + '&encoding=base64' }
                  $.get(url, function (dataURL) {
                    $img.attr('src', dataURL).removeAttr('width')
                    makedocx2()
                  })
                }
                a.remove()
              }
  
            }
  
          })
          canvas.remove()
        }
      }
  
      // 生成docx：生成
      function makedocx2 () {
        if (imgscount > 1) { imgscount-- }
        else {
        // 處理Echarts  
        // 原來獲取不到數據是因為markup是克隆的 克隆clone需要傳值才會復制數據和事件處理
         markup.find('div.chart').has('canvas,svg').each(function () {
            //div.chart
            var option1 =  $(this).data('option')
           var id = $(this).attr('id')
            var $old = $this.find('#' + id)           
            // var option = $old.data('option')
            var height =500
            var theme = $old.data('theme')
            console.log( $(this),option1)
            // var height = $old.height()
            // 問題 控制台報錯 如果不寫無法渲染額chart，如果寫只要執行到這段代碼控制台報錯，好像是option一直沒有值，因為調用是沒有傳這個值的
            // console.log( $(this),echarts,id,$old,option,theme,height)
          //  var $new = $('<div style="width:' + ImageMaxWidth + 'px;height:' + height + 'px;"></div>')
          //     var dom = $new.get(0)
          //     $.extend(true, option1, { animation: false, toolbox: { show: false }, tooltip: { show: false, trigger: 'none' } })
          //     $(this).after($new)
          //     var mychart = echarts.init(dom, theme)
          //     mychart.setOption(option1)
          //     var src = mychart.getDataURL({ backgroundColor: '#fff', excludeComponents: ['toolbox', 'tooltip'] })
          //     console.log(11111111111111111)
          //     $new.replaceWith('<div style="text-align:center;"><img src="' + src + '"></div>')
          //     mychart.dispose()
            // 克隆的Echarts與已有的沖突，所以新建DOM，重新繪制
            if (option1) {
              console.log(111111111,option1,echarts)

              if (typeof (option1) === 'string') { option1 = JSON.parse(option1) }
              //改變位置解決報錯誤
               var $new = $('<div style="width:' + ImageMaxWidth + 'px;height:' + height + 'px;"></div>')
              var dom = $new.get(0)
              $.extend(true, option1, { animation: false, toolbox: { show: false }, tooltip: { show: false, trigger: 'none' } })
              $(this).after($new)
              var mychart = echarts.init(dom, theme)
              mychart.setOption(option1)
              var src = mychart.getDataURL({ backgroundColor: '#fff', excludeComponents: ['toolbox', 'tooltip'] })
              console.log(11111111111111111)
              $new.replaceWith('<div style="text-align:center;"><img src="' + src + '"></div>')
              mychart.dispose()
            }
            $(this).remove()
          })
  
          // 處理樣式
          markup.find('h1').css({ 'text-align': 'center' })
          markup.find('p').css({ 'text-indent': '2em' })
          markup.find('table').css({ 'border-collapse': 'collapse', 'width': '100%' }).removeAttr('class')
          markup.find('th').css({ 'border': '1px solid #000', 'text-align': 'center', 'background-color': '#e8e8e8' })
          markup.find('td').css({ 'border': '1px solid #000', 'text-align': 'center' })
          markup.find('.am-text-primary').css({ 'color': '#5085FF' }).removeClass('am-text-primary')
          markup.find('.text-left,.am-text-left').css({ 'text-align': 'left' }).removeClass('text-left am-text-left')
          markup.find('.text-center,.am-text-center').css({ 'text-align': 'center' }).removeClass('text-center am-text-center')
          markup.find('.text-right,.am-text-right').css({ 'text-align': 'right' }).removeClass('text-right am-text-right')
          markup.find('.text-top').css({ 'vertical-align': 'top' }).removeClass('text-top')
          markup.find('[class=""]').removeAttr('class')
          markup.find('[contenteditable]').removeAttr('contenteditable')
  
          // 再次移除某些節點
          markup.find('script').remove()
  
          // console.log(markup.html())
  
          var content = '<!DOCTYPE html><html><body>' + markup.html() + '</body></html>'
          var converted = window.htmlDocx.asBlob(content)  
          markup.remove()
          if (typeof layer !== 'undefined') { layer.closeAll() }
          else if (typeof AMUI === 'object') { $('#btn-word').prop('disabled', false).find('i').attr('class', 'am-icon-file-word-o') }
          else { $('#btn-word').prop('disabled', false).val($('#btn-word').data('value')) }
  
          saveAs.saveAs(converted, filename + '.docx')
        }
      }
    }
  })(jQuery)
  

 

導出excel插件

Export2Excel

import Vue from 'vue'
import Axios from '../http'
import store from '../store/index'

// 獲取組別列表 
// 設置組別
export const global={
    setGroup:function(){
        Axios.get("/api/v1/admin/roleGroup").then(function (res) {
          let data = res["data"]["data"]
          localStorage.setItem("roleGroup",data)
        }).catch(function (err) {
          alert(err)
        })
      },
      // 導出功能
      handleDownload:function(tHeader,filterVal,arr) {
//參數分別是表頭，表頭對應的參數要和arr數據里屬性一致，他們的長度要相同
       require.ensure([], () => {
          const { export_json_to_excel } = require("@/vendor/Export2Excel.js");
       
          if (arr.length == 0) {
           alert("請至少一條數據導入");
            return;
          }
          const data = global.formatJson(filterVal, arr);
          export_json_to_excel(tHeader, data, "導出的列表excel");
        });
      },
      formatJson:function(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]));
      },
      
      // 封裝函數樹節點轉化為扁平
      NestedToFlat(group) { 
        var res = []
        var that = this
        for(var key in group ){
             res.push({
            id: group[key].id,
            name: group[key].name,
            pid: group[key].pid
          })
          if (group[key]['items'].length!==0) {
            res = res.concat(global.NestedToFlat(group[key]['items']));
          }
        }
        return res;
      },
      //扁平換為樹節點
      treeData(source, id, parentId, children){   
        let cloneData = JSON.parse(JSON.stringify(source))
        return cloneData.filter(father=>{
            let branchArr = cloneData.filter(child => father[id] == child[parentId]);
            branchArr.length>0 ? father[children] = branchArr : ''
            return father[parentId] == 0        // 如果第一層不是parentId=0，請自行修改
        })
      },
      // 檢查權限
        actioncheck(name){
          if (store.state.btnList.indexOf(name)>-1) {
             return true
          }else{
            return false
          }
        },
        assecsshave(name){
          if (store.state.btnList.indexOf(name)>-1) {
            
          }
        }
        // 計算日期
        
      // dels:function(url,data){
      //   var that = this
      //   this.$confirm("此操作將永久刪除該文件, 是否繼續?", "提示", {
      //     confirmButtonText: "確定",
      //     cancelButtonText: "取消",
      //     type: "warning"
      //   })
      //     .then(() => {
      //       //  點擊確定開始刪除
      //       this.axios
      //         .post(url, data)
      //         .then(function(res) {
      //           console.log(res);
      //           if (res["data"]["code"] == 0) {
      //             that.$message("刪除成功");
      //             // that.getlist(that.page.currentpage, that.page.pagesize);
      //           } else {
      //             that.$message(res["data"]["msg"]);
      //           }
      //         });
      //     })
      //     .catch(() => {
      //       this.$message({
      //         type: "info",
      //         message: "已取消刪除"
      //       });
      //     });
      // }

}