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. 静态文件下载

对于存放在项目中的静态文件，可以直接通过相对路径引用

<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接口，静态文件方式最简单，特殊格式需用对应库处理

二、通用快捷键切换

‌微软输入法‌：使用组合键 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地址，从而触发文件下载。

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>

在上面的示例中，我们首先创建一个<a>标签，然后设置其href属性为文件的URL地址，download属性为要下载的文件名。最后，通过调用click()方法触发链接的点击事件，实现文件的下载。

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发送GET请求，设置responseType为blob以便获取文件的二进制数据。然后，通过创建临时URL、创建<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发送GET请求，并使用.blob()方法将返回的数据转换为blob对象。然后，通过创建临时URL、创建<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. 使用创建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。接着，我们创建一个<a>标签，并设置其href属性为文件URL，download属性为要下载的文件名。最后，通过调用click()方法触发链接的点击事件，实现文件的下载。

到此这篇关于vue实现下载文件并加密保存到本地的方法详解的文章就介绍到这了,更多相关vue下载文件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

如何利用Vue+Element做个小页面
vue使用element写东西让我感觉到了特别的方便,下面这篇文章主要给大家介绍了关于如何利用Vue+Element做个小页面的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
2022-03-03
Vue3 diff算法的简单解刨
如今Vue3的势头正盛，在diff算法方面也做了相应的变化，利用到了最长递增子序列把性能又提升了一个档次。本文就来带大家简单解刨一下Vue3中的diff算法
2023-02-02
解决Vue2.0自带浏览器里无法打开的原因（兼容处理）
本篇文章主要介绍了解决Vue2.0自带浏览器里无法打开的原因（兼容处理），非常具有实用价值，需要的朋友可以参考下
2017-07-07
Vue如何设置滚动条自动保持到最底端
在开发中我们常常会遇到需要让滚动条保持到最底端的需求,比如在开发一个聊天框时,请求接口拿到消息列表数据,展示到前端页面时,需要让滚动条自动滚到最底端,以此来展示最后的聊天记录,这篇文章主要介绍了Vue如何设置滚动条自动保持到最底端,需要的朋友可以参考下
2024-08-08
Vue实现固定定位图标滑动隐藏效果
移动端页面，有时候会出现一些固定定位在底部图标，比如购物车等。这篇文章主要介绍了Vue制作固定定位图标滑动隐藏效果,需要的朋友可以参考下
2019-05-05
vue中使用element ui的input框实现模糊搜索的输入框
这篇文章主要介绍了vue中使用element ui的input框实现模糊搜索的输入框,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
2023-11-11
Vue+TypeScript中处理computed方式
这篇文章主要介绍了Vue+TypeScript中处理computed方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件实例分析
这篇文章主要介绍了vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件,结合实例形式分析了vue.js事件简写、冒泡及阻止冒泡等相关操作技巧,需要的朋友可以参考下
2019-03-03
解决使用vue-awesome-swiper组件手动滚动点击失效问题
这篇文章主要介绍了使用vue-awesome-swiper组件手动滚动点击失效问题解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-06-06
如何一步步基于element-ui封装查询组件
这篇文章主要给大家介绍了关于如何一步步基于element-ui封装查询组件的相关资料,本文通过示例代码介绍的非常详细,对大家学习或者使用vue.js具有一定的参考学习价值,需要的朋友可以参考下
2021-10-10