先封装一下生成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. 修改host简化远程访问

    问题描述: 使用本机登陆服务器时,需要经常输入IP地址,在局域网下和非局域网下输入的IP又不一样,十分麻烦,如果可以给IP命名一个简单的名字,岂不是很方便? 解决方法: 修改host文件: vim / ...

  2. EasyUI combobox的panelHeight自动高度

    在使用EasyUI的时候,有时会用到combobox组件,这里的记录数不是很固定,设置为auto可能会被挡住,设置固定高度时,option很少时,也很丑 所以这里给出我自己自动调整combobox的p ...

  3. vim列编辑模式快捷键

    vi/vim编辑器 多行行首插入   1 在多行行首插入,在nomal模式下按下ctrl+v,然后进行选择(如果想要选择至文件结尾,则再按G) 2 选择好以后按大写的I,则光标会自动跳转到所选择行的第 ...

  4. CShopDialog类

    #ifndef SHOP_H #define SHOP_H #include "XWidget.h" #include "GameConfig.h" class ...

  5. tornado部署

    1.为什么要运行多个tornado实例同步请求时,在应用处理过程中(如数据库查询,磁盘访问),服务器进程不能接受新请求.所以需要运行多个服务器进程实例.异步请求时,在应用处理时,服务器进程是非阻塞的, ...

  6. vue-router介绍

    vue-router学习 转自:https://my.oschina.net/u/1416844/blog/849971 1. vue-router介绍 vue-router把react-router ...

  7. Project Euler：Problem 34 Digit factorials

    145 is a curious number, as 1! + 4! + 5! = 1 + 24 + 120 = 145. Find the sum of all numbers which are ...

  8. android4.0.3源码之USB wifi移植心得

    http://blog.csdn.net/eastmoon502136/article/details/7850157 http://forum.cubietech.com/forum.php?mod ...

  9. 示例 - 如何在ASP.NET中应用Spider Studio生成的DLL?

    >> 接前文 "示例 - 如何在Console应用程序中应用SpiderStudio生成的DLL?", 将其运用到ASP.NET中: 1. 创建WebApplicati ...

  10. Android基础总结（二）布局，存储

    常见布局 相对布局 RelativeLayout 组件默认左对齐.顶部对齐 设置组件在指定组件的右边 android:layout_toRightOf="@id/tv1" 设置在指 ...