vuejs实现点击导出按钮把数据加密后传到json/txt格式文件中并下载,以及上传json文件解密获得json内容

vuejs实现点击导出按钮把数据加密后传到json/txt格式文件中并下载,以及上传json文件解密获得json内容

(1)在Vue.js中使用crypto-js进行加密和解密,首先安装crypto-js库

npm install crypto-js

(2)在需要使用加密解密的组件中引入crypto-js库

import CryptoJS from 'crypto-js';

(3)数据加密后传到json/txt格式文件中并下载。上传json文件解密获得json内容

<template>
  <div class="app-container">
    <el-button type="primary" @click="exportJson">导 出</el-button>
    <el-button type="primary" @click="$refs.fileInput.click()">导 入</el-button>
    <input type="file" ref="fileInput" style="opacity: 0;" accept=".json" @change="uploadFile">
  </div>
</template>

<script>
import CryptoJS from 'crypto-js';
export default {
  name: "Model",
  data() {
    return {
      form:{
        id:1,
        num: 10,
        name: '导出JSON文件'
      },
      key: 'key'
    };
  },
  methods: {
    exportJson(){
      var data = JSON.stringify(this.form);
      const jsonStr = CryptoJS.AES.encrypt(data, this.key).toString();
    
      // 创建一个Blob对象
      const blob = new Blob([jsonStr], { type: 'application/json' });

      // 创建一个a标签
      const link = document.createElement('a');
      link.href = URL.createObjectURL(blob);

      // 设置下载文件的名称
      link.download = this.form.name+'.json';

      // 模拟点击下载链接
      link.click();

      // 释放URL对象
      URL.revokeObjectURL(link.href);
    },
    uploadFile(event) {
      const file = event.target.files[0]; // 获取选择的文件
      const reader = new FileReader(); // 创建一个文件读取对象
      reader.onload = (e) => {
        const fileName = file.name; // 获取文件名
        const content = e.target.result; // 获取文件内容
        // 获得解密后的内容
        const jsonStr = CryptoJS.AES.decrypt(content, this.key).toString(CryptoJS.enc.Utf8);
      };
      reader.readAsText(file); // 以文本形式读取文件内容
    },
  }
};
</script>

详细介绍:使用CryptoJS的方法进行加密和解密。
例如,使用AES算法进行加密和解密:
data是要加密的数据。
key是加密密钥。
encryptData函数使用AES算法对数据进行加密,并返回加密后的数据。
decryptData函数使用AES算法对加密后的数据进行解密,并返回解密后的数据。

// 加密
const encryptData = (data, key) => {
  const encryptedData = CryptoJS.AES.encrypt(data, key).toString();
  return encryptedData;
};

// 解密
const decryptData = (encryptedData, key) => {
  const decryptedData = CryptoJS.AES.decrypt(encryptedData, key).toString(CryptoJS.enc.Utf8);
  return decryptedData;
};
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值