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;
};