vue 项目下载（导出）功能并携带请求头token

兄弟萌做项目时，经常会碰到导出，下载的功能，这里我参考了一些博主的论文，加上自己的理解，封装了一个全局的方法，以后项目中如果有下载（导出）功能只要引入该方法，一句代码就能gai决下载（导出）功能！

ok，发车！

可以自己建一个js文件写下载方法，引入man.js,也可以直接写在man.js(不建议)里，在这里我用的是post请求（get只是传参不一样，下次有需要补上吧）。

import axios from 'axios'// 标注了自定义的 可以自己先写死地址和token测试下，很快的
export function newExportsExcel (url, param = {}, xlsName) {//这是请求的地址 （自定义）let _herf = window.host// 这是请求头中需要的token （自定义）let token = window.sessionStorage.getItem('token')axios.post(`${_herf}${url}`, param, {responseType: 'blob',headers: {token,// 这是格式，看后段要不要你传 （自定义）ContentType:'application/json'},}).then(res => {let blob = res.datalet reader = new FileReader()reader.readAsDataURL(blob)reader.onload = (e) => {let a = document.createElement('a')a.download = xlsNamea.href = e.target.resultdocument.body.appendChild(a)a.click()document.body.removeChild(a)}}).catch(err => {console.log(err.message)})}

后面两步非常简单，接下来，在man.js中挂载到全局，方便每个页面使用

import Vue from 'vue'// 引入这个下载（导出）方法
import { newExportsExcel } from '@/utils/exports'// 挂载到全局
Vue.prototype.$newExportsExcel = newExportsExcel

然后，起飞！哪里页面需要方法就用在哪里！是不是so easy？下课！

//导出handleExportExcel () {// 也可以直接把this.formData写在实参里，就不需要下列这行代码了const param = this.formData// 后端的地址、参数、下载后自定义的文件名.xlsx'this.$newExportsExcel('/zy/exportExcel', param, '安全页面表格.xlsx')}

vue 项目下载（导出）功能并携带请求头token相关推荐

vue项目的导出功能
说到导出功能有很多种方式,今天我也来写一种,纯js的导出功能,可用于项目当中,可用于项目当中,可用于项目当中.重要的事情说三遍,现在开始 let url = window.URL.createObje ...
Vue 项目excel导出功能
一.思路前端主导(工作大量在前端) 二.新建文件夹及文件新建src/vendor/export2Excel.js 示例代码:示例地址 /* eslint-disable */ import { s ...
vue使用html2canvas jspdf实现pdf下载导出功能
vue使用html2canvas jspdf实现pdf下载导出功能功能步骤介绍: 1.安装全局.局部引用 2.封装 html2canvas结合 JsPDF 下载导出方法 3.组件页面调用
Angular导出功能（excel导出功能、文件数据流导出功能、图片的下载导出功能）
Angular导出功能(excel导出功能.文件数据流导出功能.图片的下载导出功能) 场景1:(直接返回网络地址进行导出的excel) 后台返回的是 : "http://192.168.0. ...
vue项目搜索历史功能的实现
vue项目搜索历史功能的实现播放器项目中歌曲搜素页面的首先需要在state定义搜索历史,在其中保存搜索历史 state.js:<br>// 搜索历史: searchHistory: [ ...
node.js/VUE项目中导出excel表格的多种实现方法（D2admin适用）
方法一.vue+js-xlsx 1.vue项目内安装两个依赖:xlsx.file-saver npm install xlsx --save npm install file-saver --sa ...
vue项目前端导出xlsx表格带边框
最近项目中要求不再通过发送请求导出excel表格了,于是在网上找了找方法,在这记录一下方便以后查阅一.首先先在项目中安装这几个包 npm install xlsx --save npm instal ...
系统项目报表导出功能开发
与正常的导出功能不同,应局方要求需要导出一些截至当前的工程采集状态.提交审核状态等字段.该一类字段需要在导出时进行实时统计并且比较耗时. 1. 前期统计方式:单线程全量统计并返回前端问题:根据当时统 ...
「Vue To Words」 - 教你在Vue项目中导出Word文档（包含表格合并，图片修改大小）
前言:最近在项目中遇到了,vue页面需要导出word文档,今日就进行记录一下,如有不对的地方,还请见谅 ^^ 简单说一下需求:需要导出的页面是表格页面,因为包含表格的嵌套和合并,其实最主要的就是导出页 ...
Vue 项目下载文件最佳解决方案
大厂技术高级前端 Node进阶点击上方程序员成长指北,关注公众号回复1,加入高级Node交流群原文链接: https://juejin.cn/post/70628885824651919 ...

vue 项目下载（导出）功能并携带请求头token

vue 项目下载（导出）功能并携带请求头token相关推荐

最新文章

热门文章

vue 项目下载（导出）功能 并携带请求头token

vue 项目下载（导出）功能 并携带请求头token相关推荐

最新文章

热门文章

vue 项目下载（导出）功能并携带请求头token

vue 项目下载（导出）功能并携带请求头token相关推荐