vuejs实现点击导出按钮把数据加密后传到json/txt格式文件中并下载,以及上传json文件解密获得json内容
(3)数据加密后传到json/txt格式文件中并下载。上传json文件解密获得json内容。(1)在Vue.js中使用crypto-js进行加密和解密,首先安装crypto-js库。decryptData函数使用AES算法对加密后的数据进行解密,并返回解密后的数据。encryptData函数使用AES算法对数据进行加密,并返回加密后的数据。(2)在需要使用加密解密的组件中引入crypto-js库。
·
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;
};
更多推荐
已为社区贡献5条内容
所有评论(0)