河北省城乡建设厅网站首页,设计笔记页面,网站上实用的h5特效,常用知名购物网站vuejs实现点击导出按钮把数据加密后传到json/txt格式文件中并下载#xff0c;以及上传json文件解密获得json内容
#xff08;1#xff09;在Vue.js中使用crypto-js进行加密和解密#xff0c;首先安装crypto-js库
npm install crypto-js#xff08;2#xff09;在需要使…vuejs实现点击导出按钮把数据加密后传到json/txt格式文件中并下载以及上传json文件解密获得json内容
1在Vue.js中使用crypto-js进行加密和解密首先安装crypto-js库
npm install crypto-js2在需要使用加密解密的组件中引入crypto-js库
import CryptoJS from crypto-js;3数据加密后传到json/txt格式文件中并下载。上传json文件解密获得json内容
templatediv classapp-containerel-button typeprimary clickexportJson导 出/el-buttonel-button typeprimary click$refs.fileInput.click()导 入/el-buttoninput typefile reffileInput styleopacity: 0; accept.json changeuploadFile/div
/templatescript
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;
};
