vue使用js-file-download插件下載文件亂碼的解決
更新時間：2024年07月18日 10:49:52 作者：寶藏程序員
這篇文章主要介紹了vue使用js-file-download插件下載文件亂碼的解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
使用js-file-download插件下載文件亂碼
在開發(fā)vue項目時遇到使用js-file-download插件下載后端傳過來的二進制文件流時報錯。
像這樣：
解決方法
在默認情況下vue的axios的responseType默認時json，如果接收的時文件流就可能會造成亂碼或者null，我們只需在axios的請求頭中加入responseType:'blob'即可解決問題。
vue通過url下載文件，保留文件名不亂碼
技術名詞解釋
下載文件方法封裝
技術細節(jié)
本方法適用在后臺沒有提供下載接口，前臺直接用a標簽下載，文件名是文件服務器加密后的亂碼。
解決下載后文件名亂碼問題，保持原文件名。
直接新建download.js，把封裝好的代碼復制進去即可。
export async function downloadFile(url, fileName) {
try {
const res = await fetch(url)
const blob = await res.blob()
const a = document.createElement('a')
const objectURL = URL.createObjectURL(blob)
a.href = objectURL
a.download = fileName
a.click()
URL.revokeObjectURL(objectURL)
} catch (error) {
console.error('Error occurred while handling file download:', error)
}
}總結
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了vue中使用svg-icon遇到的坑及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要介紹了Vue2.0 $set()的正確使用詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
在實際開發(fā)中,我們經(jīng)常會遇到將Vue項目部署到Tomcat服務器上的需求,下面這篇文章主要給大家介紹了關于tomcat部署前端vue項目(項目上線具體操作)的相關資料,需要的朋友可以參考下2024-07-07
插槽就是子組件中的提供給父組件使用的一個占位符，用<slot></slot> 表示，父組件可以在這個占位符中填充任何模板代碼，如 HTML、組件等，填充的內(nèi)容會替換子組件的<slot></slot>標簽，這篇文章主要介紹了Vue插槽的理解和使用,需要的朋友可以參考下2023-03-03
利用Vue實現(xiàn)將圖片轉換為Base64編碼的方法
這篇文章主要介紹了利用Vue實現(xiàn)將圖片轉換為Base64編碼的方法,Base64是一種編碼方式,用于將二進制數(shù)據(jù)轉換成64個基于ASCII的可打印字符,這種編碼可嵌入圖像到HTML或CSS中,減少加載時間,解決跨域問題,并支持離線應用開發(fā),需要的朋友可以參考下2024-10-10
Vuepress生成文檔部署到gitee.io的注意事項及說明
這篇文章主要介紹了Vuepress生成文檔部署到gitee.io的注意事項及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要為大家詳細介紹了Vue實現(xiàn)用戶登錄及token驗證，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
解決vue prop傳值default屬性如何使用,為何不生效的問題
這篇文章主要介紹了解決vue prop傳值default屬性如何使用,為何不生效的問題。具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章主要給大家介紹了關于如何利用Vue3+Vite批量導入模塊/資源的相關資料,文中通過實例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2022-03-03
這篇文章主要介紹了vue-jsonp的使用及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12