資訊專(zhuān)欄INFORMATION COLUMN
最近看到很多前端的小伙伴們，需要從服務(wù)器端下載諸如excel，word，pdf的文件，但是在處理時(shí)怎么也沒(méi)法產(chǎn)生想要的效果（點(diǎn)擊后立即下載文件），而是沒(méi)有任何響應(yīng)，查看控制臺(tái)發(fā)現(xiàn)返回的數(shù)據(jù)是一片亂碼，結(jié)合自己的經(jīng)驗(yàn)，希望能給大家一些幫助。
我這里ajax請(qǐng)求使用VUE的常用小伙伴axios，怎么用axios我就不詳細(xì)介紹了，不會(huì)的小伙伴請(qǐng)看這里
this.$http.post("/outputExcel",{
//Content_Type:"Authorization",
// excelData:JSON.stringify(this.tableData),可以付帶一些參數(shù)
}).then((res)=> {
console.log(res.data.filePath)
//正常情況下返回值是excel文件的下載路徑
this.excelpath="http://127.0.0.1:3000/download/"+res.data.filePath;
window.open(this.excelpath)
})
以上代碼配合服務(wù)器端實(shí)現(xiàn)文件下載，但需要注意的是，服務(wù)器端不是返回文件，而是返回文件的路徑res.data.filePath。比如我這里的文件存放在服務(wù)器端download文件夾下。
取得路徑后使用window.open()方法獲取文件，同時(shí)服務(wù)器端應(yīng)該有相應(yīng)的處理程序，處理這個(gè)get請(qǐng)求：
我服務(wù)器端使用的express： 代碼大致如下：
var express = require("express");
var path= require("path")
var router = express.Router();
router.get("/:filename", function(req, res, next) {
var filename=req.params.filename;
var file=path.join(__dirname,"../download/"+filename)
res.download(file)
})
module.exports = router;
重點(diǎn)就是，不要直接返回文件，而是通過(guò)訪問(wèn)文件路徑的方式進(jìn)行下載；** 如果你還有什么疑問(wèn)，或者更好的辦法，可以留言互相學(xué)習(xí)交流。
-
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/107337.html
摘要：當(dāng)前有一個(gè)需求前端對(duì)當(dāng)前頁(yè)面的數(shù)據(jù)做篩選之后需要將其導(dǎo)出至文件且發(fā)送的請(qǐng)求需傳入需驗(yàn)證的參數(shù)如頁(yè)面信息嘗試了提交及其他方法后出現(xiàn)亂碼等問(wèn)題最后用成功完成了導(dǎo)出。直接貼代碼下面是解釋這段代碼不加會(huì)導(dǎo)致導(dǎo)出的出現(xiàn)亂碼問(wèn)題。 當(dāng)前有一個(gè)需求 前端對(duì)當(dāng)前頁(yè)面的數(shù)據(jù)做篩選之后需要將其導(dǎo)出至excel文件且發(fā)送的請(qǐng)求需傳入需驗(yàn)證的參數(shù)如頁(yè)面token信息嘗試了form提交及其他方法后出現(xiàn)excel...
摘要：方式請(qǐng)求的數(shù)據(jù)只能存放在內(nèi)存空間，可以通過(guò)訪問(wèn)，但是無(wú)法保存到硬盤(pán)，因?yàn)椴荒苤苯雍陀脖P(pán)交互，否則將是一個(gè)安全問(wèn)題。是第一個(gè)第三方的庫(kù)，所以同理。這里是返回的對(duì)象這里表示類(lèi)型創(chuàng)建下載的鏈接下載后文件名點(diǎn)擊下載下載完成移除元素釋放掉對(duì)象 前言 我的項(xiàng)目中有一個(gè)需求：點(diǎn)擊按鈕生成可編輯的word文檔訂單詳情的信息我使用的前端框架是Vue.js、后臺(tái)使用的是node.jsnode.js生成和導(dǎo)...
摘要：性能會(huì)有所降低一點(diǎn)內(nèi)容，刷新整個(gè)頁(yè)面用戶的操作頁(yè)面會(huì)中斷整個(gè)頁(yè)面被刷新了就是能夠做到局部刷新三對(duì)象是中最重要的一個(gè)對(duì)象。頭信息已經(jīng)接收，響應(yīng)數(shù)據(jù)尚未接收。 一、什么是Ajax Ajax(Asynchronous JavaScript and XML) 異步JavaScript和XML Ajax實(shí)際上是下面這幾種技術(shù)的融合： (1)XHTML和CSS的基于標(biāo)準(zhǔn)的表示技術(shù) (2)DOM進(jìn)...
摘要：更多文章平時(shí)在前端下載文件有兩種方式，一種是后臺(tái)提供一個(gè)，然后用下載，另一種就是后臺(tái)直接返回文件的二進(jìn)制內(nèi)容，然后前端轉(zhuǎn)化一下再下載。假設(shè)是返回來(lái)的二進(jìn)制數(shù)據(jù)這次沒(méi)有問(wèn)題，文件能正常打開(kāi)，內(nèi)容也是正常的，不再是亂碼。 更多文章 平時(shí)在前端下載文件有兩種方式，一種是后臺(tái)提供一個(gè) URL，然后用 window.open(URL) 下載，另一種就是后臺(tái)直接返回文件的二進(jìn)制內(nèi)容，然后前端轉(zhuǎn)化一...
閱讀 2344·2021-11-15 11:38
閱讀 3553·2021-09-22 15:16
閱讀 1197·2021-09-10 11:11
閱讀 3165·2021-09-10 10:51
閱讀 2943·2019-08-30 15:56
閱讀 2786·2019-08-30 15:44
閱讀 3192·2019-08-28 18:28
閱讀 3529·2019-08-26 13:36
