vue實(shí)現(xiàn)下載文件并加密保存到本地的方法詳解
一、下載文件
在Vue項(xiàng)目中實(shí)現(xiàn)文件下載并保存到本地主要有以下幾種方法：
1. 使用Blob對(duì)象和URL.createObjectURL
這種方法適用于處理二進(jìn)制流數(shù)據(jù)或后端返回的文件流
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處理文件下載
當(dāng)需要從API獲取文件時(shí)，axios配合Blob對(duì)象是常用方案
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)文件下載
對(duì)于存放在項(xiàng)目中的靜態(tài)文件，可以直接通過相對(duì)路徑引用
<a href="/static/files/example.pdf" rel="external nofollow" download="自定義文件名.pdf"> 下載PDF </a>
4. 使用第三方庫處理Excel等特殊格式
對(duì)于Excel文件導(dǎo)出，可以使用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")
}注意事項(xiàng)
- Chrome瀏覽器不支持ActiveXObject方式下載
- createObjectURL參數(shù)必須是Blob類型
- 下載文件名中文亂碼問題需設(shè)置Content-Disposition響應(yīng)頭
- 大文件下載建議使用分塊傳輸和進(jìn)度提示
以上方法可根據(jù)實(shí)際需求選擇，其中Blob方案最通用，axios適用于API接口，靜態(tài)文件方式最簡單，特殊格式需用對(duì)應(yīng)庫處理
二、通用快捷鍵切換
微軟輸入法：使用組合鍵 Ctrl + Shift + F 可快速切換簡繁體12
搜狗輸入法：同樣支持 Ctrl + Shift + F 快捷鍵切換34
其他輸入法：部分第三方輸入法也支持此快捷鍵，但需確認(rèn)具體輸入法是否兼容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'; //進(jìn)行前端密碼加密 const secretKey = '密碼' const password = CryptoJS.AES.encrypt(passwordo, secretKey).toString();
四、知識(shí)擴(kuò)展：Vue中下載不同文件的幾種方式
當(dāng)在Vue中需要實(shí)現(xiàn)文件下載功能時(shí)，我們可以有多種方式來完成。下面將介紹五種常用的方法。
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方法來打開一個(gè)新窗口，并直接訪問文件的URL地址，從而觸發(fā)文件下載。
2. 使用<a>標(biāo)簽進(jìn)行文件下載
<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)建一個(gè)<a>標(biāo)簽，然后設(shè)置其href屬性為文件的URL地址，download屬性為要下載的文件名。最后，通過調(diào)用click()方法觸發(fā)鏈接的點(diǎn)擊事件，實(shí)現(xiàn)文件的下載。
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請求，設(shè)置responseType為blob以便獲取文件的二進(jìn)制數(shù)據(jù)。然后，通過創(chuàng)建臨時(shí)URL、創(chuàng)建<a>標(biāo)簽并設(shè)置下載屬性，實(shí)現(xiàn)文件的下載。
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()方法將返回的數(shù)據(jù)轉(zhuǎn)換為blob對(duì)象。然后，通過創(chuàng)建臨時(shí)URL、創(chuàng)建<a>標(biāo)簽并設(shè)置下載屬性，實(shí)現(xiàn)文件的下載。
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>
在這個(gè)示例中，我們直接調(diào)用Vue實(shí)例的$download方法，并傳入文件的URL地址和下載的文件名，即可實(shí)現(xiàn)文件的下載。
6. 使用創(chuàng)建a標(biāo)簽方法下載文件
<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>
在這個(gè)示例中，我們首先定義了文件所在的文件夾路徑folderPath，然后通過拼接文件夾路徑和文件名來構(gòu)建完整的文件URL地址fileUrl。接著，我們創(chuàng)建一個(gè)<a>標(biāo)簽，并設(shè)置其href屬性為文件URL，download屬性為要下載的文件名。最后，通過調(diào)用click()方法觸發(fā)鏈接的點(diǎn)擊事件，實(shí)現(xiàn)文件的下載。
到此這篇關(guān)于vue實(shí)現(xiàn)下載文件并加密保存到本地的方法詳解的文章就介紹到這了,更多相關(guān)vue下載文件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue使用element寫東西讓我感覺到了特別的方便,下面這篇文章主要給大家介紹了關(guān)于如何利用Vue+Element做個(gè)小頁面的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-03-03
如今Vue3的勢頭正盛，在diff算法方面也做了相應(yīng)的變化，利用到了最長遞增子序列把性能又提升了一個(gè)檔次。本文就來帶大家簡單解刨一下Vue3中的diff算法2023-02-02
本篇文章主要介紹了解決Vue2.0自帶瀏覽器里無法打開的原因（兼容處理），非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-07-07
Vue如何設(shè)置滾動(dòng)條自動(dòng)保持到最底端
在開發(fā)中我們常常會(huì)遇到需要讓滾動(dòng)條保持到最底端的需求,比如在開發(fā)一個(gè)聊天框時(shí),請求接口拿到消息列表數(shù)據(jù),展示到前端頁面時(shí),需要讓滾動(dòng)條自動(dòng)滾到最底端,以此來展示最后的聊天記錄,這篇文章主要介紹了Vue如何設(shè)置滾動(dòng)條自動(dòng)保持到最底端,需要的朋友可以參考下2024-08-08
Vue實(shí)現(xiàn)固定定位圖標(biāo)滑動(dòng)隱藏效果
移動(dòng)端頁面，有時(shí)候會(huì)出現(xiàn)一些固定定位在底部圖標(biāo)，比如購物車等。這篇文章主要介紹了Vue制作固定定位圖標(biāo)滑動(dòng)隱藏效果,需要的朋友可以參考下2019-05-05
vue中使用element ui的input框?qū)崿F(xiàn)模糊搜索的輸入框
這篇文章主要介紹了vue中使用element ui的input框?qū)崿F(xiàn)模糊搜索的輸入框,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-11-11
這篇文章主要介紹了Vue+TypeScript中處理computed方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue基礎(chǔ)之事件簡寫、事件對(duì)象、冒泡、默認(rèn)行為、鍵盤事件實(shí)例分析
這篇文章主要介紹了vue基礎(chǔ)之事件簡寫、事件對(duì)象、冒泡、默認(rèn)行為、鍵盤事件,結(jié)合實(shí)例形式分析了vue.js事件簡寫、冒泡及阻止冒泡等相關(guān)操作技巧,需要的朋友可以參考下2019-03-03
解決使用vue-awesome-swiper組件手動(dòng)滾動(dòng)點(diǎn)擊失效問題
這篇文章主要介紹了使用vue-awesome-swiper組件手動(dòng)滾動(dòng)點(diǎn)擊失效問題解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
這篇文章主要給大家介紹了關(guān)于如何一步步基于element-ui封裝查詢組件的相關(guān)資料,本文通過示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue.js具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2021-10-10