- ubuntu12.04环境下使用kvm ioctl接口实现最简单的虚拟机
- Ubuntu 通过无线网络安装Ubuntu Server启动系统后连接无线网络的方法
- 在Ubuntu上搭建网桥的方法
- ubuntu 虚拟机上网方式及相关配置详解
CFSDN坚持开源创造价值,我们致力于搭建一个资源共享平台,让每一个IT人在这里找到属于你的精彩世界.
这篇CFSDN的博客文章vue 导出文件,携带请求头token操作由作者收集整理,如果你对这篇文章有兴趣,记得点赞哟.
前言 。
本文并不能直接复制到本地看效果,仅提供代码参考 。
1.使用axios的方式携带请求头token 。
2.设置响应的数据类型 。
responseType: "blob" 。
3.请求成功,返回二进制文件的数据回来 。
4.请求失败,返回json 。
5.示例代码 。
<template> <div> <el-button type="primary" size="small" :loading="btnLoading" @click="exportFile">导出</el-button> </div></template><script>import axios from "axios";export default { data() { return { btnLoading: false }; }, methods: { // responseType 响应类型 exportFile() { this.btnLoading = true; axios({ method: "get", url: "/api", headers: { token: "79faf82271944fe38c4f1d99be71bc9c" }, responseType: "blob" }) .then(res => { this.btnLoading = false; if (res.data.type) { // 文件下载 const blob = new Blob([res.data], { type: "application/vnd.ms-excel" }); let link = document.createElement("a"); link.href = URL.createObjectURL(blob); link.setAttribute("download", "导出文件.xlsx"); link.click(); link = null; this.$message.success("导出成功"); } else { // 返回json this.$message.warning(res.data.msg); } }) .catch(err => { this.btnLoading = false; this.$message.error("下载失败"); }); } }};</script>
补充知识:Vue项目导出功能、带token导出Excel 。
在vue后台管理项目中,目前我常用的就两种导出方式 。
一种是不需要携带token的,直接调用后台的接口,携带需要传递参数就行,具体实现代码如下:
在main.js封装指令 。
let baseDownloadUrl = "http://xxxxxxx:8080" // 域名const PATH = { userList:"vue/export/userList" // 后台接口地址}// 封装v-out指令Vue.directive("out", { inserted: (el, binding) => { el.addEventListener("click", () => { console.log(binding.value) // 自定义指令传请求参数 let a = document.createElement("a") // 创建a标签 // 处理请求参数,在url后面拼接 let params = "?" for (let key in binding.value.params) { params = params + key + "=" + binding.value.params[key] + "&" } console.log(params) a.style.display = "none" // 测试导出文件 // link.href = "https://dl.google.com/tag/s/appguid%3D%7B8A69D345-D564-463C-AFF1-A69D9E530F96%7D%26iid%3D%7BA381F257-9F2F-3652-F0EC-56B9B2C86F92%7D%26lang%3Dzh-CN%26browser%3D4%26usagestats%3D1%26appname%3DGoogle%2520Chrome%26needsadmin%3Dprefers%26ap%3Dx64-stable-statsdef_1%26installdataindex%3Dempty/update2/installers/ChromeSetup.exe" // a标签添加导出地址 a.href = baseDownloadUrl + PATH[binding.value.pathName] + putCode + (params || "") a.setAttribute("download", "文件名") // a标签添加download属性,导出文件名需要就添加,不需要则为空 document.body.appendChild(a) a.click() // 触发a标签点击事件 }) }})
在需要导出的页面应用:
<el-button size="small" type="primary" v-out="{ pathName: "userList", params: //{请求参数}}" >导出</el-button>
另一种导出方式则是带token导出,token封装在请求头里,在请求头里发送给后端 。
调用导出接口时,需要加参数:responseType: ‘blob" (必须要有的) 。
封装导出请求文件exportOut.js 。
export function expotOut (searchList, pathName, xlsName) { // 获取时间,这一步是在下载时文件名带下载日期,例如:用户信息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 = "http://xxxxxxx:8080" // 域名 const PATH = { userList:"vue/export/userList", // 后台接口地址 } // 参数 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 = url a.download = filename document.body.appendChild(a) a.click() window.URL.revokeObjectURL(url) } } } xhr.send(formData)}
vue文件中使用导出功能:
引入exportOut.js 。
import { expotOut } from "../http/exportOut" 。
使用 。
methods: { // 导出 outFile () { expotOut(this.searchList, // 导出请求参数 "userList", // 后台地址PATH对象的key "用户信息"// 导出文件名字 ) }, }
以上这篇vue 导出文件,携带请求头token操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我.
原文链接:https://blog.csdn.net/weixin_43233914/article/details/106541965 。
最后此篇关于vue 导出文件,携带请求头token操作的文章就讲到这里了,如果你想了解更多关于vue 导出文件,携带请求头token操作的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。
我正在努力做到这一点 在我的操作中从数据库获取对象列表(确定) 在 JSP 上打印(确定) 此列表作为 JSP 中的可编辑表出现。我想修改然后将其提交回同一操作以将其保存在我的数据库中(失败。当我使用
我有以下形式的 Linq to Entities 查询: var x = from a in SomeData where ... some conditions ... select
我有以下查询。 var query = Repository.Query() .Where(p => !p.IsDeleted && p.Article.ArticleSections.Cou
我正在编写一个应用程序包,其中包含一个主类,其中主方法与GUI类分开,GUI类包含一个带有jtabbedpane的jframe,它有两个选项卡,第一个选项卡包含一个jtable,称为jtable1,第
以下代码产生错误 The nested query is not supported. Operation1='Case' Operation2='Collect' 问题是我做错了什么?我该如何解决?
我已经为 HA redis 集群(2 个副本、1 个主节点、3 个哨兵)设置了本地 docker 环境。只有哨兵暴露端口(10021、10022、10023)。 我使用的是 stackexchange
我正在 Desk.com 中构建一个“集成 URL”,它使用 Shopify Liquid 模板过滤器语法。对于开始日期为 7 天前而结束日期为现在的查询,此 URL 需要包含“开始日期”和“结束日期
你一定想过。然而情况却不理想,python中只能使用类似于 i++/i--等操作。 python中的自增操作 下面代码几乎是所有程序员在python中进行自增(减)操作的常用
我需要在每个使用 github 操作的手动构建中显示分支。例如:https://gyazo.com/2131bf83b0df1e2157480e5be842d4fb 我应该显示分支而不是一个。 最佳答
我有一个关于 Perl qr 运算符的问题: #!/usr/bin/perl -w &mysplit("a:b:c", /:/); sub mysplit { my($str, $patt
我已经使用 ArgoUML 创建了一个 ERD(实体关系图),我希望在一个类中创建两个操作,它们都具有 void 返回类型。但是,我只能创建一个返回 void 类型的操作。 例如: 我能够将 book
Github 操作仍处于测试阶段并且很新,但我希望有人可以提供帮助。我认为可以在主分支和拉取请求上运行 github 操作,如下所示: on: pull_request push: b
我正在尝试创建一个 Twilio 工作流来调用电话并记录用户所说的内容。为此,我正在使用 Record,但我不确定要在 action 参数中放置什么。 尽管我知道 Twilio 会发送有关调用该 UR
我不确定这是否可行,但值得一试。我正在使用模板缓冲区来减少使用此算法的延迟渲染器中光体积的过度绘制(当相机位于体积之外时): 使用廉价的着色器,将深度测试设置为 LEQUAL 绘制背面,将它们标记在模
有没有聪明的方法来复制 和 重命名 文件通过 GitHub 操作? 我想将一些自述文件复制到 /docs文件夹(:= 同一个 repo,不是远程的!),它们将根据它们的 frontmatter 重命名
我有一个 .csv 文件,其中第一列包含用户名。它们采用 FirstName LastName 的形式。我想获取 FirstName 并将 LastName 的第一个字符添加到它上面,然后删除空格。然
Sitecore 根据 Sitecore 树中定义的项目名称生成 URL, http://samplewebsite/Pages/Sample Page 但我们的客户有兴趣降低所有 URL(页面/示例
我正在尝试进行一些计算,但是一旦我输入金额,它就会完成。我只是希望通过单击按钮而不是自动发生这种情况。 到目前为止我做了什么: Angular JS - programming-fr
我的公司创建了一种在环境之间移动文件的复杂方法,现在我们希望将某些构建的 JS 文件(已转换和缩小)从一个 github 存储库移动到另一个。使用 github 操作可以实现这一点吗? 最佳答案 最简
在我的代码中,我创建了一个 JSONArray 对象。并向 JSONArray 对象添加了两个 JSONObject。我使用的是 json-simple-1.1.jar。我的代码是 package j
我是一名优秀的程序员,十分优秀!