關于前端使用ajax下載服務器端文件亂碼的問題

callmewhy 發布于2019-08-26 11:40 / 3634人閱讀

最近看到很多前端的小伙伴們，需要從服務器端下載諸如excel，word，pdf的文件，但是在處理時怎么也沒法產生想要的效果（點擊后立即下載文件），而是沒有任何響應，查看控制臺發現返回的數據是一片亂碼，結合自己的經驗，希望能給大家一些幫助。

我這里ajax請求使用VUE的常用小伙伴axios，怎么用axios我就不詳細介紹了，不會的小伙伴請看這里

    this.$http.post("/outputExcel",{
          //Content_Type:"Authorization",        
         // excelData:JSON.stringify(this.tableData),可以付帶一些參數
           }).then((res)=> {
           console.log(res.data.filePath)
           //正常情況下返回值是excel文件的下載路徑
           this.excelpath="http://127.0.0.1:3000/download/"+res.data.filePath;
           window.open(this.excelpath)
           })

以上代碼配合服務器端實現文件下載，但需要注意的是，服務器端不是返回文件，而是返回文件的路徑res.data.filePath。比如我這里的文件存放在服務器端download文件夾下。
取得路徑后使用window.open()方法獲取文件，同時服務器端應該有相應的處理程序，處理這個get請求：
我服務器端使用的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;

重點就是，不要直接返回文件，而是通過訪問文件路徑的方式進行下載；** 如果你還有什么疑問，或者更好的辦法，可以留言互相學習交流。

GPU云服務器云服務器 Ajax亂碼問題整理關于javascript的問題關于php的問題關于系統錯誤的問題

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/107337.html

ajax post導出excel小結(解決亂碼問題)

摘要：當前有一個需求前端對當前頁面的數據做篩選之后需要將其導出至文件且發送的請求需傳入需驗證的參數如頁面信息嘗試了提交及其他方法后出現亂碼等問題最后用成功完成了導出。直接貼代碼下面是解釋這段代碼不加會導致導出的出現亂碼問題。當前有一個需求前端對當前頁面的數據做篩選之后需要將其導出至excel文件且發送的請求需傳入需驗證的參數如頁面token信息嘗試了form提交及其他方法后出現excel...

tanglijun 2019-08-26 10:24 評論0 收藏0
nodejs(officegen)+vue(axios)在客戶端導出word文檔

摘要：方式請求的數據只能存放在內存空間，可以通過訪問，但是無法保存到硬盤，因為不能直接和硬盤交互，否則將是一個安全問題。是第一個第三方的庫，所以同理。這里是返回的對象這里表示類型創建下載的鏈接下載后文件名點擊下載下載完成移除元素釋放掉對象前言我的項目中有一個需求：點擊按鈕生成可編輯的word文檔訂單詳情的信息我使用的前端框架是Vue.js、后臺使用的是node.jsnode.js生成和導...

Julylovin 2019-08-22 15:24 評論0 收藏0
AJAX入門這一篇就夠了

摘要：性能會有所降低一點內容，刷新整個頁面用戶的操作頁面會中斷整個頁面被刷新了就是能夠做到局部刷新三對象是中最重要的一個對象。頭信息已經接收，響應數據尚未接收。一、什么是Ajax Ajax(Asynchronous JavaScript and XML) 異步JavaScript和XML Ajax實際上是下面這幾種技術的融合： (1)XHTML和CSS的基于標準的表示技術 (2)DOM進...

tunny 2019-08-19 10:41 評論0 收藏0
前端下載二進制流文件

摘要：更多文章平時在前端下載文件有兩種方式，一種是后臺提供一個，然后用下載，另一種就是后臺直接返回文件的二進制內容，然后前端轉化一下再下載。假設是返回來的二進制數據這次沒有問題，文件能正常打開，內容也是正常的，不再是亂碼。更多文章平時在前端下載文件有兩種方式，一種是后臺提供一個 URL，然后用 window.open(URL) 下載，另一種就是后臺直接返回文件的二進制內容，然后前端轉化一...

lidashuang 2019-08-26 10:25 評論0 收藏0
20K前端大佬面試(關于如何回答ajax跨域問題)

摘要：在接觸前端開發起，跨域這個詞就一直以很高的頻率在我們學習工作中重復出現，最近在工作中遇到了跨域的相關問題，這里我把它總結記錄一下。在接觸前端開發起，跨域這個詞就一直以很高的頻率在我們學習工作中重復出現，最近在工作中遇到了跨域的相關問題，這里我把它總結記錄一下。關于跨域，有N種類型，現在我只專注于ajax請求跨域(ajax跨域只是屬于瀏覽器同源策略中的一部分,其它的這里不做介紹)，內容...

Yangyang 2019-08-02 16:09 評論0 收藏0