先封装一下生成excel的方法

downfile.js

export default {

  data() {

    return {}

  },

  components: {},

  created() {

  },

  methods: {

    downloadFiles(data,type){

      this.JSONToExcelConvertor(data.content, type+"报表", data.title);

    },

    JSONToExcelConvertor(JSONData, FileName, ShowLabel) {

      //先转化json

      const arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData;

      let excel = '<table>';

      //设置表头

      let row = "<tr>";

      for (let i = 0, l = ShowLabel.length; i < l; i++) {

        row += "<td>" + ShowLabel[i] + '</td>';

      }

      //换行

      excel += row + "</tr>";

      //设置数据

      for (let i = 0; i < arrData.length; i++) {

        let row = "<tr>";

        for (let index in arrData[i]) {

          const value = arrData[i][index] === "." ? "" : arrData[i][index];

          row += '<td>' + value + '</td>';

        }

        excel += row + "</tr>";

      }

      excel += "</table>";

      let excelFile = "<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:x='urn:schemas-microsoft-com:office:excel' xmlns='http://www.w3.org/TR/REC-html40'>";

      excelFile += '<meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8">';

      excelFile += '<meta http-equiv="content-type" content="application/vnd.ms-excel';

      excelFile += '; charset=UTF-8">';

      excelFile += "<head>";

      excelFile += "<!--[if gte mso 9]>";

      excelFile += "<xml>";

      excelFile += "<x:ExcelWorkbook>";

      excelFile += "<x:ExcelWorksheets>";

      excelFile += "<x:ExcelWorksheet>";

      excelFile += "<x:Name>";

      excelFile += "{worksheet}";

      excelFile += "</x:Name>";

      excelFile += "<x:WorksheetOptions>";

      excelFile += "<x:DisplayGridlines/>";

      excelFile += "</x:WorksheetOptions>";

      excelFile += "</x:ExcelWorksheet>";

      excelFile += "</x:ExcelWorksheets>";

      excelFile += "</x:ExcelWorkbook>";

      excelFile += "</xml>";

      excelFile += "<![endif]-->";

      excelFile += "</head>";

      excelFile += "<body>";

      excelFile += excel;

      excelFile += "</body>";

      excelFile += "</html>";

      const uri = 'data:application/vnd.ms-excel;charset=utf-8,' + encodeURIComponent(excelFile);

      const link = document.createElement("a");

      link.href = uri;

      link.style = "visibility:hidden";

      link.download = FileName + ".xls";

      document.body.appendChild(link);

      link.click();

      document.body.removeChild(link);

    }

  }

}

然后在页面中调用

<template>

    <div>

        <button @click="_sendDownloadFilesServer()">下载报表</button>

    </div>

</template>

<script>

import RecordServer from "@/service/record.service"

const recordServer = new RecordServer()

import downloadFileMixin from "@/mixins/downfile" //把上面的文件导入

export default{

    data(){

        return{

        }

    },

    mixins:[downloadFileMixin],

    methods:{

        _sendDownloadFilesServer(){

           recordServer.sendDownloadFilesServer({

             onSuccess:(res)=>{

                console.log(res)

                this.downloadFiles(res,'火车') // 点击下载文件会下载名为火车报表的excel

             },

             onFailed:(err)=>{

                console.log(err)

             }

           })

        }

    }

}

</script>

vue 把后台返回的json拼接成excel并下载的更多相关文章

  1. js循环处理后台返回的json数组

    <script type="text/javascript"> function gongdan_search(elm){ var dangqian_value=$(e ...

  2. 后台返回的json数据传到前端页面并在页面的表格中填充

    web前端页面: <table id="myTable" cellpadding="1" cellspacing="0" border ...

  3. 前台如何处理后台返回的json数据

    后台返回的json数据格式: { "state": true, "data": { "id": 0, "name": & ...

  4. JS获取后台返回的JSON数据

    问题:通过$.get从后台获取了一段json串{"id":"1","name":"ww"},然后要拿到这里面的id和na ...

  5. vue.js如何根据后台返回来的图片url进行图片下载

    最近在做一个前端vue.js对接的功能模块时,需要实现一个下载图片的功能,后台返回来的是一串图片url,试了很多种方法,发现点击下载时出来的效果都是跳着到一个新的图片网页,后来经过一番琢磨,终于解决了 ...

  6. Ajax处理后台返回的Json数据

    // 处理后台传来的Json字符串装换成Json对象 var dataJson = JSON.parse(data); // 此时可以从Json对象中取值 if(dataJson.result == ...

  7. 后台返回的json数据，前台需要修改对象的键值名，重新修改数据格式

    //例如,后台返回的数据为: var json = { data: [   {value: 103.95, name: "法拉利"}, {value: 103.2, name: & ...

  8. [转]android中解析后台返回的json字符串

    普通形式的:服务器端返回的json数据格式如下: {"userbean":{"Uid":"100196","Showname&qu ...

  9. 关于eval()函数处理后台返回的json数据

    对于服务器返回的JSON字符串,如果jquery异步请求没做类型说明,或者以字符串方式接受,那么需要做一次对象化处理,方式不是太麻烦,就是将该字符串放于eval()中执行一次.这种方式也适合以普通ja ...

随机推荐

  1. unity, StartCoroutine and StopCoroutine

    startCoroutine("func",1.0f)可以用stopCoroutine("func")来停. startCoroutine(func(1.0f) ...

  2. vim插件管理利器

    一.pathogen简介 通常情况下安装vim插件,通常是将所有的插件和相关的doc文件都安装在中一文件夹中,如将插件全部安装在/usr/share/vim/vim73/plugin/目录下,将帮助文 ...

  3. linux 流量控制全攻略(TC)

    TC很是强大啊,很多所谓的硬件路由器,都是基于这个做的. TC介绍 在linux中,TC有二种控制方法CBQ和HTB.HTB是设计用来替换CBQ的.它是一个层次式的过滤框架.TC包括三个基本的构成块: ...

  4. CLoadScene类

    #ifndef __LOADSCENE_H__ #define __LOADSCENE_H__ #include "GameFrameHead.h" class CGameScen ...

  5. 一款基于jQuery外观优雅带遮罩弹出层对话框

    今天我们要来分享一款基于jQuery的弹出层对话框插件,该插件包含多种对话框类型,比如提示框.确认框等.更为实用的是,这款jQuery对话框中的按钮事件也可以被我们所捕获,从而相应对话框按钮的各种事件 ...

  6. android圆形图像

    在网上找了一下,最简单的是利用canvas的setXfermode,来控制图片重合部分的显示策略. 图片混合时,先画的是dst,后画的是src,各种混合的方式如下,其中圆形是dst,正方形是src: ...

  7. Easyui Datagrid相同连续列合并扩展（二）

    JS: //合并相同数据的单元格 function MergeCells(seletor, rows, fields) { if(rows == null || rows.length == 0 || ...

  8. 在堆栈中，push为入栈操作，pop为出栈操作

    LinkedList提供以下方法:(ArrayList无此类方法) addFirst(); removeFirst(); addLast(); removeLast(); 在堆栈中,push为入栈操作 ...

  9. java----Servlet的生命周期

    Servlet生命周期分为三个阶段: 1,初始化阶段  调用init()方法 2,响应客户请求阶段 调用service()方法 3,终止阶段 调用destroy()方法 Servlet初始化阶段: 在 ...

  10. java-I/O File类(5)-Reader和Writer、OutputStreamWriter 、BufferedWriter、字节流和字符流的区别

      标签: outputstreamwriterreader字符file方法 2015-05-14 23:06 469人阅读 评论(0) 收藏 举报  分类: 孙鑫-java基础(16)  I-O(4 ...