先封装一下生成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. Spring Cloud 模块简介

    Spring Cloud Netflix对微服务的支持还有: Hystrix: 断路器和资源隔离 Feign: 声明式HTTP REST请求客户端 Ribbon: 与Eureka结合实现软负载均衡 Z ...

  2. 一名全栈工程师Node.js之路－转

    Node.js 全球现状 虽然 Node.js 在国内没有盛行,但据 StackOverflow 2016 年开发者调查,其中 node.js .全栈.JavaScript 相关的技术在多个领域(包括 ...

  3. vue 发送ajax请求

    一. 简介 1.vue本身不支持发送AJAX请求,需要使用vue-resource(vue1.0版本).axios(vue2.0版本)等插件实现 2.axios是一个基于Promise的HTTP请求客 ...

  4. ubuntu中rc.local无效

    在ubuntu中写了一点iptables规则,但是,竟然iptables竟然无效,经过多方查找问题...眼泪... 终于发现是rc.local竟然没有运行,我晕.仔细检查iptables脚本n遍,没有 ...

  5. 0x01 译文:Windows桌面应用Win32开发简介

    本节课将简单介绍下使用C++开发Windows桌面应用的一些基础知识 目录: 准备你的开发环境 Windows 代码规范 操作字符串 什么是一个Window? WinMain:程序的入口点 1. 准备 ...

  6. linux 下面压缩，解压.rar文件以及rar,unrar实例

    http://www.rarlab.com/download.htm [root@bass src]# wget http://www.rarlab.com/rar/rarlinux-x64-5.4. ...

  7. php7性能、兼容性和稳定性探讨

    前几天看到php7发布了beta1版本,想了解一下php7到底折腾了些啥东西出来.这一了解发现不得了了,改变还挺多的.最最重要的方面就是性能提升了不少,这边有一个pdf文件是惠新宸(鸟哥,php核心开 ...

  8. Unity3D学习（九）：C#和C++的相互调用

    前言 不知不觉已经一年了,这一年来一直忙于公司项目疯狂加班,很少有自己的时间写下东西.不过好在项目最近也步入正轨了,正好抽空写点东西记录下学到的一些东西. 公司项目是一个端游IP移植手游,端游是基于C ...

  9. 【sql绕过】Bypass waf notepad of def

    文章是通过阅读<[独家连载]我的WafBypass之道 (SQL注入篇)>写的阅读笔记. Waf的类型 1.云waf云waf通常是CDN包含的waf,DNS在解析的时候要解析到cdn上面制 ...

  10. Excel 自定义关闭按钮

    遇到过这样一个需求,是在excel关闭的时候,不要excel本身的保存窗口,只用自定义的. 这个的需要第一,是点击关闭时候触发, 第二:触发后,不能还是弹出那个窗口 第三:取消后,要能停止程序 为了弄 ...