❤功能集合
图片下载
方式一
window.open(URL, name, features, replace)
// 新窗口的 URL、窗口名称、窗口特性window.open(row.certificateImageUrl,"_blank", "width=500,height=400")
//打开一个新窗口并且指定长宽
参数说明：
URL：要在新窗口中加载的 URL 地址。可以是绝对 URL 或相对 URL。
name：新窗口的名称。可以是一个字符串，也可以是一个已经存在的窗口名称。如果名称已经存在，则新窗口会在该窗口中打开。如果名称为空或未指定，则会在新窗口中打开。
“_blank”：在新窗口或标签页中打开 URL。
“_self”：在当前窗口或标签页中打开 URL。
“_parent”：在父级窗口或标签页中打开 URL。
“_top”：在最顶层的窗口或标签页中打开 URL。
features：一个逗号分隔的字符串，用于指定新窗口的特性，如大小、位置、工具栏等。具体可用的特性取决于浏览器。
replace：一个布尔值，用于指定新窗口是否替换当前浏览器的历史记录。如果为 true，则在新窗口打开后，当前浏览器的历史记录将被替换为新窗口的历史记录。如果为 false 或未指定，则在新窗口打开后，当前浏览器的历史记录将保留。
function toHoutai() {window.open('http://trainingadmin.caderm.org', 'new_window');
}
方式二
// 下载图片01
const handleDownLoad = (url, name) => {const iframe = document.createElement("iframe");iframe.style.display = "none";iframe.src = url;document.body.appendChild(iframe);setTimeout(() => {document.body.removeChild(iframe);}, 200);// 下载图片downloadByBlob(url, name);
};// 下载图片03
const download = (href, name) => {let eleLink = document.createElement("a");eleLink.download = name;eleLink.href = href;eleLink.click();eleLink.remove();
};// 下载图片02
const downloadByBlob = (url, name) => {let image = new Image();image.setAttribute("crossOrigin", "anonymous");image.src = url;image.onload = () => {let canvas = document.createElement("canvas");canvas.width = image.width;canvas.height = image.height;let ctx = canvas.getContext("2d");ctx.drawImage(image, 0, 0, image.width, image.height);canvas.toBlob((blob) => {let url = URL.createObjectURL(blob);download(url, name);// 用完释放URL对象URL.revokeObjectURL(url);});};
};网页返回
const toBack = (e) => {window.history.back(-1);
};
加密解密
① 插件加密
MD5加密（不可逆）
MD5加密是不可逆的，相当于是插件加密，当然你也可以把他的方法抄过来自己实现。
MD5.js是通过前台js加密的方式对用户信息，密码等私密信息进行加密处理的工具，前端用的比较多。
MD5加密的6种方法
1, hex_md5(value)
2, b64_md5(value)
3, any_md5(s, e)
4, hex_hmac_md5(key, data)
5, b64_hmac_md5(key, data)
6, any_hmac_md5(key, data, e)
————————————————
var str64 = b64_md5(urlInput.value);outPut.value = str64;console.log('hex_md5加密', hex_md5(urlInput.value));console.log('b64_md5加密', b64_md5(urlInput.value));console.log('any_md5加密', any_md5('1', urlInput.value));console.log('hex_hmac_md5加密', hex_hmac_md5('1', urlInput.value));
————————————————sha1加密（不可逆）
② JS API 加密
var btnEncrypt = document.getElementById('btnEncrypt');
var urlInput = document.getElementById('urlInput');
var outPut = document.getElementById('encryptContent');
var btnDecryption = document.getElementById('btnDecryption');
var decryptionContent = document.getElementById('decryptionContent');// base 64 加密
btnEncrypt.addEventListener('click', function() {var str64 = window.btoa(urlInput.value);outPut.value = str64;
})
btnDecryption.addEventListener('click', function() {var str = window.atob(outPut.value);decryptionContent.value = str;
})前端控制台出现hex_md5 is not defined的错误
报错信息提示：
md5.js这一个文件没有问题
[Vue warn]: Error in v-on handler: “ReferenceError: hex_md5 is not defined”
found in —> at src/views/admin/user.vue at src/views/admin.vue at src/app.vuewarn @ webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:620
解决方法
检查index.html，是否有引入md5.js，写法是否正确
写法错误
