vue 实现前端excel导出表格携带token的两种方法

场景一：后端返回一个api接口，直接点击按钮就能下载Excel文件时：

(1)不需要携带token

<!-- 注：excelUrl绑定的是后端返回的api接口 -->
<el-link :href="excelUrl">  <el-button type="primary" plain>导出数据</el-button>
</el-link>

（2）需要携带token

在src文件夹下=>新建uitls文件夹=>uitls文件夹中新建一个文件export.js封装方法：
export.js中：

// 导出Excel功能
import axios from 'axios'export function expotOut(searchList, pathName, xlsName, url) {// 获取时间，这一步是在下载时文件名带下载日期，例如：用户信息2020-04-27.xls,如无需要可以去掉let d = new Date()let month = (d.getMonth() + 1)let day = d.getDate()let time = d.getFullYear() + '-' + (String(month).length > 1 ? month : '0' + month) + '-' + (String(day).length > 1 ? day : '0' + day)// 地址let baseURL = axios.defaults.baseURL // 域名const PATH = {userList: url // 后台接口地址}// 参数let params = '?'for (let key in searchList) {params = params + key + '=' + searchList[key] + '&'}function createObjectURL(object) { return (window.URL) ? window.URL.createObjectURL(object) : window.webkitURL.createObjectURL(object) }var xhr = new XMLHttpRequest()var formData = new FormData()xhr.open('get', baseURL + PATH[pathName] + params) // url填写后台的接口地址，如果是post，在formData append参数（参考原文地址）xhr.setRequestHeader('token', localStorage.getItem('token'))xhr.responseType = 'blob'xhr.onload = function(e) {if (this.status === 200) {var blob = this.response// xls文件名称var filename = `${xlsName}${time}.xls`if (window.navigator.msSaveOrOpenBlob) {navigator.msSaveBlob(blob, filename)} else {var a = document.createElement('a')var url = createObjectURL(blob)a.href = urla.download = filenamedocument.body.appendChild(a)a.click()window.URL.revokeObjectURL(url)}}}xhr.send(formData)
}

在所需页面中使用：

<template><el-button @click="outFile" type="primary" plain>导出</el-button>
</template><script>
import { expotOut } from '@/utils/export.js'  //引入//导出outFile() {expotOut(this.query, // 导出请求参数'userList', // 后台地址PATH对象的key'用户信息', // 导出文件名字'clothTestReport/excelExport' //后台url)},
</script>

场景二：后端返回的是一堆数据，然后自己转换成Excel格式文件导出时：

（1）npm下载模块

 cnpm install vue-json-excel

（2）在main.js中全局引入

 import JsonExcel from 'vue-json-excel'Vue.component('downloadExcel', JsonExcel)

（3）在所需页面中使用

 <download-excel class="export-excel-wrapper" :data="json_data" :fields="json_fields" name="远程诊断报告导出.xls"><el-button round type="primary" size="small">导出数据</el-button>
</download-excel>

         json_fields: {"头部-诊断名称": "name",    //常规字段"头部-联系电话": "phone.mobile", //支持嵌套属性"头部-损坏区域代码": {field: "phone.landline",//自定义回调函数callback: value => {return `损坏区域代码 - ${value}`;}}},json_data: [{name: "损坏的组件一",city: "New York",country: "United States",birthdate: "1978-03-15",phone: {mobile: "1-541-754-3010",landline: "(541) 754-3010"}},{name: "损坏的组件二",city: "Athens",country: "Greece",birthdate: "1987-11-23",phone: {mobile: "+1 855 275 5071",landline: "(2741) 2621-244"}}],json_meta: [[{" key ": " charset "," value ": " utf- 8 "}]],

vue 实现前端excel导出表格携带token的两种方法相关推荐

vue中下载excel的使用，后端链接两种情况，一个是链接，一个是文件流
vue中下载excel使用一.这是第一种情况,后台链接地址返回的是一个url,这个时候我只要在导出按钮上绑定exportData()这个事件方法就好了 exportData() {this.time ...
Django 后台admin管理页面添加简易导出/下载数据功能的两种方法
在Django中有时候需要在后台界面需要用到导出数据的功能,对于功能要求比较高的可以直接使用Import_Export库来完成.但是对于一些简单的数据导出,可以直接自定义一些简单的函数来实现导出数据. ...
vue 获取请求url_vue 获取url里参数的两种方法小结
我就废话不多说了,大家还是直接看代码吧~ 第一种: const query = Qs.parse(location.search.substring(1)) let passport = query. ...
设置Excel表格“只读模式”的两种方法
Excel表格的"只读模式"可以帮助我们防止意外更改表格,根据不同需求,表格可以设置"有密码"和"无密码"的两种"只读模式&quo ...
laravel8 excel导出（本片文章推荐两种方式）
第一种简单方案通过composer安装插件库:maatwebsite/excel - Packagist 官网:Introduction | Laravel Excel 导出步骤:
vue父组件向子组件动态传值的两种方法
在一些项目需求中需要父组件向子组件动态传值,比如我这里的需求是,父组件动态通过axios获取返回的图片url数组然后传给子组件,上传图片的子组件拿到该数组后进行遍历并展示图片,因为有时候获取到的会是空 ...
Layui数据表格隔行变色的两种方法
开发工具与关键技术:MVC 作者:Mr_恺撰写时间:2019年7月17日 Layui数据表格隔行变色,第一种的就是layui插件里有一个自带的方法: even这个属性把它设置为:true,就开启 ...
excel 重复方差分析_如何在Excel中运行方差方差分析的两种方法
excel 重复方差分析 Recently, we looked at how to Perform a One-Way Analysis of Variance in Excel. In today ...
ADO对Excel对象进行连接时的两种方法区别
在通过ADO对Excel对象进行连接时(此时Excel则认为是一个数据源),需要配置对Excel数据源对应的连接串,这个连接串中包括了Provider信息(其实类似对数据库进行连接操作时,都需要指定连 ...

vue 实现前端excel导出表格携带token的两种方法

场景一：后端返回一个api接口，直接点击按钮就能下载Excel文件时：

(1)不需要携带token

（2）需要携带token

场景二：后端返回的是一堆数据，然后自己转换成Excel格式文件导出时：

vue 实现前端excel导出表格携带token的两种方法相关推荐

最新文章

热门文章