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 = urllink.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 = downloadUrllink.download = 'file.pdf'link.click()} catch (error) {console.error(error)}
}3. 静态文件下载
对于存放在项目中的静态文件，可以直接通过相对路径引用
<a href="/static/files/example.pdf" 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接口，静态文件方式最简单，特殊格式需用对应库处理
二、通用快捷键切换
- 微软输入法：使用组合键
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();