vue 下载Excel 文件

vue 下载Excel 文件 vue-json-excel

1.安装

npm install vue-json-excel -S

2.引入

在mian.js中

 //引入 导出Excel vue-json-excel
import JsonExcel from "vue-json-excel";
Vue.component("downloadExcel", JsonExcel);

3.构建外部-公共组件 downloadExcel

通过传值的方式，传入参数。参考父子组件传值

<template><!-- name="导出的文件名字.xls" --><download-excel:fetch="fetchData":fields="json_fields"worksheet="My Worksheet":name="json_name"class="excel"><el-button size="mini" class="el-icon-download"></el-button></download-excel>
</template><script>
export default {props: {list: Array,json_fields: Object,json_name: String,},data() {return { };},methods: {fetchData() {let excelList = [];console.log("this.list");console.log(this.list);//this.list是从后台接口获取的一组JSON数据（注意：使用forEach前，先判断数组存不存在！）this.list.forEach((item) => {excelList.push(item);});console.log("excelList");console.log(excelList);return excelList;},},
};
</script><style lang="less" scoped>
.excel {display: inline-block;
}
</style>

4.使用公共组件

引入

import downloadExcel from "@/components/downloadExcel.vue";

定义

components: { downloadExcel},

使用在 vue 页面中

<!-- Excel --><downloadExcel:list="list":json_fields="json_fields":json_name="json_name"/>

相关参数。json_fields是下载的时候对应的表头和字段。json_name是下载时候的名字。list是table表中绑定的数据。

json_fields: {户主姓名: "Name",户主证件类型: "Id_Type",户主证件号码: {   //身份证号码长度 太长，变成科学计数法，通过将其变为字符串来解决field: "Id_No",callback: value => {return "&nbsp;" + value;}},// 状态: {//   field: "Status",//   callback: (value) => {//     return value === true ? "启用" : "禁用";//   },// },},json_name: "房屋图.xls",

点击按钮下载就行。

vue 下载Excel 文件相关推荐

Vue 下载 Excel 文件
Vue 下载 Excel 文件 Vue前端将List列表下载为Excel文件安装依赖包首先前端将List列表生成Excel文件需要下载几个依赖包. npm install -S file-save ...
SpringBoot+Vue下载Excel文件流（No converter、Excel乱码）
目录介绍 No converter Excel乱码正确代码后端代码前端代码方法1 方法2 方法3 介绍后端使用SpringBoot.Mybatis Plus,前端使用Vue,进行Excel ...
vue下载excel文件的方法
通过url下载用后端提供文件的地址,直接使用浏览器去下载通过window.location.href = 文件路径下载 window.location.href = `${location.ori ...
js vue 下载excel(.xls)文件
@[TOC](js vue 下载excel(.xls)文件) 先看下载下来的excel文件 1.首先,后端给到的是一个文件在服务器中的存储地址 D:\MaxSecFile\Export\Alarm_2 ...
VUE项目兼容IE11 遇见的问题 SyntaxError: strict 模式下不允许一个属性有多个定义；ie11下载excel文件需要用navigator.msSaveBlob
最近要把vue项目兼容ie11 前面引入bable等一系列操作就不说了,下面说一下具体具体的问题 1 如图所示 SyntaxError: strict 模式下不允许一个属性有多个定义, 点击sta ...
(vue)vue导出excel文件打不开，或者文件内容为object object
(vue)vue导出excel文件打不开,或者文件内容为object object[已解决] bug: 主要原因:没有注意到后端返回的数据格式,需要的是res而不是res.data 正确写法: < ...
vue下载excel表格模板和导入excel表格数据
vue下载excel表格模板和导入excel表格数据 vue制作excel表格模板给前端下载 vue制作excel表格模板给前端下载最近有个需求,需要导入excel表格,并且还需要制作模板给用户下载 ...
php通过ajax下载文件,PHP使用ajax的post方式下载excel文件简单示例
本文实例讲述了PHP使用ajax的post方式下载excel文件.分享给大家供大家参考,具体如下: 项目需求,前端发起ajax请求,后端生成excel并下载,同时需要在header头中,带上token ...
react接收后端文件_React获取Java后台文件流并下载Excel文件流程解析
记录使用blob对象接收java后台文件流并下载为xlsx格式的详细过程,关键部分代码如下. 首先在java后台中设置response中的参数: public void exportExcel(Htt ...
PHP使用ajax的post方式下载excel文件简单示例
本文实例讲述了PHP使用ajax的post方式下载excel文件.分享给大家供大家参考,具体如下: 项目需求,前端发起ajax请求,后端生成excel并下载,同时需要在header头中,带上token ...

vue 下载Excel 文件

vue 下载Excel 文件 vue-json-excel

1.安装

2.引入

3.构建外部-公共组件 downloadExcel

4.使用公共组件

vue 下载Excel 文件相关推荐

最新文章

热门文章