先封装一下生成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. django 常用命令 详解

    check     compilemessages     createcachetable     dbshell     diffsettings     dumpdata     flush   ...

  2. Python @ddt.file_data() 为.yml 文件实例

    一,创建login.yml 文件(以登录接口为例) 1,创建 login.yml 文件,内容如下图: 打印login.yml 文件,代码及显示效果如下: 代码: import yaml,jsonf = ...

  3. 【手把手教你全文检索】Apache Lucene初探 (zhuan)

    http://www.cnblogs.com/xing901022/p/3933675.html *************************************************** ...

  4. 【转】shell pipe与输入输出重定向的区别

    http://www.cnblogs.com/chengmo/archive/2010/10/21/1856577.html

  5. jsp error-page没有生效

    1.首页检查web.xml中的配置,确保路径是正确的 <error-page> <error-code>404</error-code> <location& ...

  6. java POi excel 写入大批量数据

    直接贴代码: package jp.co.misumi.mdm.batch.common.jobrunner; import java.io.File; import java.io.FileNotF ...

  7. Can't zip RDDs with unequal numbers of partitions

    java.lang.IllegalArgumentException: Can't zip RDDs with unequal numbers of partitions //如果两个RDD分区数不同 ...

  8. SQL合并数据

    --CREATE TABLE TMaterial (PMaterial INT,FName NVARCHAR(32))--INSERT INTO TMaterial--SELECT 1,'A' UNI ...

  9. 面试常问小知识点之Integer

    背景 今天在查看Sonar的时候发现小伙伴在某些场景下如下使用 很明显sonar已经报错了,但是线上应用目前是正常的 问题 事实上经常会有面试的小伙伴或者笔试的小伙伴问这个问题 Integer的一些小 ...

  10. CSS常用样式说明

    background-attachment: fixed 随着页面的滚动轴背景图片不会移动 background-attachment: scroll 随着页面的滚动轴背景图片将移动 backgrou ...