vue實現下載文件并加密保存到本地的方法詳解
更新時間：2025年12月19日 09:35:50 作者：qq_58956810
這篇文章主要為大家詳細介紹了如何使用vue實現下載文件并加密保存到本地,文中的示例代碼講解詳細,具有一定的借鑒價值,感興趣的小伙伴可以了解下
一、下載文件
在Vue項目中實現文件下載并保存到本地主要有以下幾種方法：
1. 使用Blob對象和URL.createObjectURL
這種方法適用于處理二進制流數據或后端返回的文件流
methods: {
downloadFile() {
const content = new Blob([JSON.stringify(this.data)])
const url = URL.createObjectURL(content)
const link = document.createElement('a')
link.href = url
link.download = 'filename.txt'
link.click()
URL.revokeObjectURL(url)
}
}2. 使用axios處理文件下載
當需要從API獲取文件時，axios配合Blob對象是常用方案
async downloadFile() {
try {
const response = await axios({
method: 'get',
url: '/api/download',
responseType: 'blob'
})
const blob = new Blob([response.data])
const downloadUrl = window.URL.createObjectURL(blob)
const link = document.createElement('a')
link.href = downloadUrl
link.download = 'file.pdf'
link.click()
} catch (error) {
console.error(error)
}
}3. 靜態(tài)文件下載
對于存放在項目中的靜態(tài)文件，可以直接通過相對路徑引用
<a href="/static/files/example.pdf" rel="external nofollow" download="自定義文件名.pdf"> 下載PDF </a>
4. 使用第三方庫處理Excel等特殊格式
對于Excel文件導出，可以使用xlsx庫
import XLSX from 'xlsx'
exportExcel() {
const worksheet = XLSX.utils.json_to_sheet(this.tableData)
const workbook = XLSX.utils.book_new()
XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1")
XLSX.writeFile(workbook, "data.xlsx")
}注意事項
- Chrome瀏覽器不支持ActiveXObject方式下載
- createObjectURL參數必須是Blob類型
- 下載文件名中文亂碼問題需設置Content-Disposition響應頭
- 大文件下載建議使用分塊傳輸和進度提示
以上方法可根據實際需求選擇，其中Blob方案最通用，axios適用于API接口，靜態(tài)文件方式最簡單，特殊格式需用對應庫處理
二、通用快捷鍵切換
微軟輸入法：使用組合鍵 Ctrl + Shift + F 可快速切換簡繁體12
搜狗輸入法：同樣支持 Ctrl + Shift + F 快捷鍵切換34
其他輸入法：部分第三方輸入法也支持此快捷鍵，但需確認具體輸入法是否兼容5
三、加密方式
import bcrypt from 'bcryptjs'; const salt = await bcrypt.genSalt(10); const secretpwd = await bcrypt.hash(data.password, salt); const secretconfpwd = await bcrypt.hash(data.confirmPassword, salt); import CryptoJS from 'crypto-js'; //進行前端密碼加密 const secretKey = '密碼' const password = CryptoJS.AES.encrypt(passwordo, secretKey).toString();
四、知識擴展：Vue中下載不同文件的幾種方式
當在Vue中需要實現文件下載功能時，我們可以有多種方式來完成。下面將介紹五種常用的方法。
1. 使用window.open方法下載文件
<template>
<div>
<button @click="downloadFile('file1.pdf')">下載文件1</button>
<button @click="downloadFile('file2.jpg')">下載文件2</button>
</div>
</template>
<script>
export default {
methods: {
downloadFile(fileName) {
const fileUrl = '/path/to/' + fileName; // 文件的URL地址
window.open(fileUrl);
}
}
};
</script>
在上面的示例中，我們使用了window.open方法來打開一個新窗口，并直接訪問文件的URL地址，從而觸發(fā)文件下載。
2. 使用<a>標簽進行文件下載
<template>
<div>
<button @click="downloadFile('file1.pdf')">下載文件1</button>
<button @click="downloadFile('file2.jpg')">下載文件2</button>
</div>
</template>
<script>
export default {
methods: {
downloadFile(fileName) {
const fileUrl = '/path/to/' + fileName; // 文件的URL地址
const link = document.createElement('a');
link.href = fileUrl;
link.setAttribute('download', fileName);
link.click();
}
}
};
</script>
在上面的示例中，我們首先創(chuàng)建一個<a>標簽，然后設置其href屬性為文件的URL地址，download屬性為要下載的文件名。最后，通過調用click()方法觸發(fā)鏈接的點擊事件，實現文件的下載。
3. 使用axios下載文件
<template>
<div>
<button @click="downloadFile('file1.pdf')">下載文件1</button>
<button @click="downloadFile('file2.jpg')">下載文件2</button>
</div>
</template>
<script>
import axios from 'axios';
export default {
methods: {
downloadFile(fileName) {
const fileUrl = '/path/to/' + fileName; // 文件的URL地址
axios.get(fileUrl, { responseType: 'blob' })
.then(response => {
const url = window.URL.createObjectURL(new Blob([response.data]));
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', fileName);
document.body.appendChild(link);
link.click();
})
.catch(error => {
console.error(error);
});
}
}
};
</script>
在上面的示例中，我們使用了axios發(fā)送GET請求，設置responseType為blob以便獲取文件的二進制數據。然后，通過創(chuàng)建臨時URL、創(chuàng)建<a>標簽并設置下載屬性，實現文件的下載。
4. 使用Fetch API下載文件
<template>
<div>
<button @click="downloadFile('file1.pdf')">下載文件1</button>
<button @click="downloadFile('file2.jpg')">下載文件2</button>
</div>
</template>
<script>
export default {
methods: {
downloadFile(fileName) {
const fileUrl = '/path/to/' + fileName; // 文件的URL地址
fetch(fileUrl)
.then(response => response.blob())
.then(blob => {
const url = window.URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', fileName);
document.body.appendChild(link);
link.click();
})
.catch(error => {
console.error(error);
});
}
}
};
</script>
在上面的示例中，我們使用了Fetch API發(fā)送GET請求，并使用.blob()方法將返回的數據轉換為blob對象。然后，通過創(chuàng)建臨時URL、創(chuàng)建<a>標簽并設置下載屬性，實現文件的下載。
5. 使用Vue的$download方法下載文件
<template>
<div>
<button @click="downloadFile('file1.pdf')">下載文件1</button>
<button @click="downloadFile('file2.jpg')">下載文件2</button>
</div>
</template>
<script>
export default {
methods: {
downloadFile(fileName) {
const fileUrl = '/path/to/' + fileName; // 文件的URL地址
this.$download(fileUrl, fileName);
}
}
};
</script>
在這個示例中，我們直接調用Vue實例的$download方法，并傳入文件的URL地址和下載的文件名，即可實現文件的下載。
6. 使用創(chuàng)建a標簽方法下載文件
<template>
<div>
<button @click="downloadFile('file1.pdf')">下載文件1</button>
<button @click="downloadFile('file2.jpg')">下載文件2</button>
</div>
</template>
<script>
export default {
methods: {
downloadFile(fileName) {
const folderPath = '/path/to/folder/'; // 文件所在的文件夾路徑
const fileUrl = folderPath + fileName; // 拼接文件夾路徑和文件名
const link = document.createElement('a');
link.href = fileUrl;
link.setAttribute('download', fileName);
link.click();
}
}
};
</script>
在這個示例中，我們首先定義了文件所在的文件夾路徑folderPath，然后通過拼接文件夾路徑和文件名來構建完整的文件URL地址fileUrl。接著，我們創(chuàng)建一個<a>標簽，并設置其href屬性為文件URL，download屬性為要下載的文件名。最后，通過調用click()方法觸發(fā)鏈接的點擊事件，實現文件的下載。
到此這篇關于vue實現下載文件并加密保存到本地的方法詳解的文章就介紹到這了,更多相關vue下載文件內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
vue使用element寫東西讓我感覺到了特別的方便,下面這篇文章主要給大家介紹了關于如何利用Vue+Element做個小頁面的相關資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-03-03
如今Vue3的勢頭正盛，在diff算法方面也做了相應的變化，利用到了最長遞增子序列把性能又提升了一個檔次。本文就來帶大家簡單解刨一下Vue3中的diff算法2023-02-02
本篇文章主要介紹了解決Vue2.0自帶瀏覽器里無法打開的原因（兼容處理），非常具有實用價值，需要的朋友可以參考下2017-07-07
在開發(fā)中我們常常會遇到需要讓滾動條保持到最底端的需求,比如在開發(fā)一個聊天框時,請求接口拿到消息列表數據,展示到前端頁面時,需要讓滾動條自動滾到最底端,以此來展示最后的聊天記錄,這篇文章主要介紹了Vue如何設置滾動條自動保持到最底端,需要的朋友可以參考下2024-08-08
移動端頁面，有時候會出現一些固定定位在底部圖標，比如購物車等。這篇文章主要介紹了Vue制作固定定位圖標滑動隱藏效果,需要的朋友可以參考下2019-05-05
vue中使用element ui的input框實現模糊搜索的輸入框
這篇文章主要介紹了vue中使用element ui的input框實現模糊搜索的輸入框,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-11-11
這篇文章主要介紹了Vue+TypeScript中處理computed方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue基礎之事件簡寫、事件對象、冒泡、默認行為、鍵盤事件實例分析
這篇文章主要介紹了vue基礎之事件簡寫、事件對象、冒泡、默認行為、鍵盤事件,結合實例形式分析了vue.js事件簡寫、冒泡及阻止冒泡等相關操作技巧,需要的朋友可以參考下2019-03-03
解決使用vue-awesome-swiper組件手動滾動點擊失效問題
這篇文章主要介紹了使用vue-awesome-swiper組件手動滾動點擊失效問題解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
這篇文章主要給大家介紹了關于如何一步步基于element-ui封裝查詢組件的相關資料,本文通過示例代碼介紹的非常詳細,對大家學習或者使用vue.js具有一定的參考學習價值,需要的朋友可以參考下2021-10-10