先封装一下生成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. python 日志的配置，python对日志封装成类，日志的调用

    # python 日志的配置,python对日志封装成类,日志的调用 import logging # 使用logging模块: class CLog: # --------------------- ...

  2. Windows里配置Apache2.2+PHP5.3+mod_fcgid运行高效的FastCGI模式

    日发现win平台的Apache也可以跑FastCGI模式了,就折腾了一会.FastCGI模式是经实践证明了比传统的模块模式运行效率高很多.记录如下: 一.mod_fcgid配置说明 1.首先下载mod ...

  3. unity, 内置shader下载地址

    在unity的download页面上能找到Built in shaders的下载连接.

  4. Atitit.获取验证码图片通过web

    Atitit.获取验证码图片通过web 1. WebRequest进行较为底层的访问(不推荐) 1 2. WebBrowser截图 1 3. 剪贴板复制法Clipboard(推荐) 1 4. C# 取 ...

  5. atitit.研发管理--标准化流程总结---java开发环境与项目部署环境的搭建工具包总结

    atitit.研发管理--标准化流程总结---java开发环境与项目部署环境的搭建工具包总结 1. ide系列(只开发环境需要,但部署环境也做好放上,很有用) 1 2. web服务器+sdk+网站程序 ...

  6. 微服务实战-使用API Gateway

    当你决定将应用作为一组微服务时,需要决定应用客户端如何与微服务交互.在单体式程序中,通常只有一组冗余的或者负载均衡的服务提供点.在微服务架构中,每一个微服务暴露一组细粒度的服务提供点.在本篇文章中,我 ...

  7. 【转】logstash配置java环境

    1.bin/logstash,新增 JAVA_CMD=/home/admin/soft/jdk1.8.0_121/bin JAVA_HOME=/home/admin/soft/jdk1.8.0_121 ...

  8. 跟着百度学PHP[10]-读取COOKIE案例

    <?php if(!isset($_COOKIE['visittime'])){ #使用$_COOKIE获取visittime,如果不存在就执行下面的语句块,否则执行else setcookie ...

  9. Oracle复习（有记录才能沉淀.......）

    一.Oracle准备工作 1.安装Oracle Oracle数据库产品是免费的,我们可以从Oracle的官方网站(http://www.oracle.com)下载到程序安装包,Oracle在Windo ...

  10. beaglebone black ubuntu display x11 server的配置

     Change default resolution on BeagleBone modesetting vs fbdev digiteltlc May 7th, 2014, 03:28 PM Hi ...