導出

方式一：

<el-button style="width: 100%" size="medium" @click="exportConfig">導出</el-button>// 導出配置文件async exportConfig() {const base64 = await safelyExportNodeEnable()// const base64 = 'ewogICJsaW5rRW5hYmxlQ29uZmlnIjogewogICAgImxpbmsiOiBbCiAgICAgIHsKICAgICAgICAiYWxpYU5hbWUiOiAiMTEiLAogICAgICAgICJjcmVhdGVUaW1lIjogIjIwMjEtMTItMTUgMDk6NTY6MDciLAogICAgICAgICJ1cGRhdGVUaW1lIjogIjIwMjEtMTItMTUgMTA6NTY6MTYiLAogICAgICAgICJkZXN0SW50ZiI6ICIiLAogICAgICAgICJkZXN0Tm9kZUlkIjogIjIwMzgzMThmLTljZDYtMTFlYi1hMWE5LTI4NmVkNGIxY2E3YSIsCiAgICAgICAgImVuY3J5cHRUeXBlIjogImRlZmF1bHQiLAogICAgICAgICJpcCI6ICIxMC4wLjAuNSIsCiAgICAgICAgImlwRmFtaWx5IjogIklQdjQiLAogICAgICAgICJsaW5rSWQiOiAiMjAwMTo6ZmZmZjoxMi1cdTAwM2UyMDAxOjpmZmZmOjExIiwKICAgICAgICAibG9jYXRvciI6ICJEQ0ktUChSUikiLAogICAgICAgICJuZXh0SG9wSXB2NiI6ICIyMDAxOjpmZmZmOjExIiwKICAgICAgICAib3Bjb2RlIjogIjo6MTAxIiwKICAgICAgICAib3duU3JjTm9kZSI6ICJEQ0ktUChSUikiLAogICAgICAgICJwYXNzd29yZCI6ICJIdWF3ZWlAMTIzIiwKICAgICAgICAicGh5SW50ZiI6ICJHaWdhYml0RXRoZXJuZXQwLzQvMCIsCiAgICAgICAgInBvcnQiOiAyMiwKICAgICAgICAic3JjSW50ZiI6ICIiLAogICAgICAgICJzcmNOb2RlSWQiOiAiMjAzODMxOGYtOWNkNi0xMWViLWExYTktMjg2ZWQ0YjFjYTdhIiwKICAgICAgICAidXNlck5hbWUiOiAibmV0Y29uZiIsCiAgICAgICAgImxpbmtTcnY2RW5hYmxlIjogdHJ1ZQogICAgICB9LAogICAgICB7CiAgICAgICAgImFsaWFOYW1lIjogIjEtMiIsCiAgICAgICAgImNyZWF0ZVRpbWUiOiAiMjAyMS0xMS0yNSAxNDowMjoyNyIsCiAgICAgICAgInVwZGF0ZVRpbWUiOiAiMjAyMS0xMi03IDE3OjE3OjAwIiwKICAgICAgICAiZGVzdEludGYiOiAiIiwKICAgICAgICAiZGVzdE5vZGVJZCI6ICIxZDY0ZWQ0ZC05Y2Q2LTExZWItYTFhOS0yODZlZDRiMWNhN2EiLAogICAgICAgICJlbmNyeXB0VHlwZSI6ICJkZWZhdWx0IiwKICAgICAgICAiaXAiOiAiMTAuMC4wLjEiLAogICAgICAgICJpcEZhbWlseSI6ICJJUHY0IiwKICAgICAgICAibGlua0lkIjogIjIwMDE6OmZmZmY6MS1cdTAwM2UyMDAxOjpmZmZmOjIiLAogICAgICAgICJsb2NhdG9yIjogIkRDSS1QRTEiLAogICAgICAgICJuZXh0SG9wSXB2NiI6ICIyMDAxOjpmZmZmOjIiLAogICAgICAgICJvcGNvZGUiOiAiOjoxMCIsCiAgICAgICAgIm93blNyY05vZGUiOiAiRENJLVBFMSIsCiAgICAgICAgInBhc3N3b3JkIjogIkh1YXdlaUAxMjMiLAogICAgICAgICJwaHlJbnRmIjogIkdpZ2FiaXRFdGhlcm5ldDAvNC8wIiwKICAgICAgICAicG9ydCI6IDIyLAogICAgICAgICJzcmNJbnRmIjogIiIsCiAgICAgICAgInNyY05vZGVJZCI6ICJiMjhhMzNhYi05YjgxLTExZWItODAzNC0yODZlZDRiMWNhZWEiLAogICAgICAgICJ1c2VyTmFtZSI6ICJuZXRjb25mIiwKICAgICAgICAibGlua1NydjZFbmFibGUiOiBmYWxzZQogICAgICB9CiAgICBdCiAgfQp9'if (!base64) returnconst binary = atob(base64).replaceAll('\\u003c', '<').replaceAll('\\u003d', '=').replaceAll('\\u003e', '>')saveAs(new Blob([binary]), 'node-enable-config.json')},

方式二：
js如何實現base64轉文件下載保存到本地

function dataURLtoBlob(dataurl) {var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}return new Blob([u8arr], { type: mime }); }function downloadFile(url,name='What\'s the fuvk'){var a = document.createElement("a")a.setAttribute("href",url)a.setAttribute("download",name)a.setAttribute("target","_blank")let clickEvent = document.createEvent("MouseEvents");clickEvent.initEvent("click", true, true); a.dispatchEvent(clickEvent); }function downloadFileByBase64(base64,name){var myBlob = dataURLtoBlob(base64)var myUrl = URL.createObjectURL(myBlob)downloadFile(myUrl,name) }downloadFileByBase64('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAhCAYAAABX5MJvAAAACXBIWXMAAAsSAAALEgHS3X78AAAEk0lEQVRYhbVXS09bRxQ+N3bNRdjEai3UYiGMYdFFUKzykKoKSpWN1QU1YtVVCavu4vML4vQPDFGURRYosIGtQxeVF8hG2cGiICMUVUh1awlSQaldVLBsB1fncsaM773Dq80nWXPndeabOd85MzYajQbcBogYBIAYAGwKIUq3MsK442i5BhBxDgD+AoAslVy/NW58Eog4AwAvHR0AD4UQC47Wa+A2J5HgcgsA+rgkzDhGvkcSQeWbtLDpGHFDeHXDWXi06wiLL81dVH4JAPcBoAAAd7k9p8yd4XnUn75KuK6aYAI5XkhiSwgR437y/XdK3yshREI3DwAmLiOic8ecYmiNy/uImKQPIQTt9AW3vyAC/D3jNo/taaEjEZGHIoSYoJ1yPaGMeWsr1f5XPA9t9lyh1YTcGSKS8B5wvQAXPo+xMGNcT3M/6eUBIk5cN2J0JBYU8WWV9k8RkRbqVdq+4R8d+R63+W3zLnWHqzB5t+T/FKv/TwD4SOn+jQ1v8okkmLSEHF8mG0KI65FARGnMEVas+t8BIAAAiyxMB+lwOCympqagv79fJZtExJwS7mS7JbdYJFxCrsxhtQkXd8UjGYqOrZwjUq1Wf/H5fB/YO1ZWVirZbNZUmlo24imXyyQgoTCnXdOEzzOZzJtMJkPsvweAjwHg23g8/ta+CGPO4/F85mglAfX2eldXV1X7sUwmsxWPx98AhyiRAE4q5JKHPFeKMitj336MNsRkdWNjA5aXl5u9pmnC+Pj4cx4j75rm+DscZsD+iiik6pxw1vhbakOHZpZcWlqC9fV1KBQKFdl2cHAQ54UdOcPL8S2j4Gel77kQIsmL51j9CQ5fiQm7QRV+v/8PGc5dXV39tVrNCtu9vb2/T05Omna8QogCJ5a0Ev9PJQGGzBspRCR1R2zjr0Qi0aLnTk5kKXkS0teOY+KwDXI+KNKiHR0drxuNRq9hGIGrFq7X6z5H4wUeczpYcM2Y7Pu0LQERDoeHh+8ZhtFs2NnZqRaLRdfFstnsJ6FQqNLW1nZgGMaZaZrekZGRsDIkpSVBCUYhUFbeDD8NDQ19AQBRqmxvb8P8/LwrAQKJk8O9R7bt7+9XJicnZc6w3KkjIQW3yIReA8A98mVPT8+PnLhgYGAABgcH4fT0tGXy7u6uVYbDYWhvb2/pGxsbO2FicoNaEhJSE++4XmI3WSQo/mdnZx2TEM9v8Onp6WpfX5/9pD5Uvq3Xmu49IZ9qFPu/KjmAoiRXq9WWHTNccHZ2pnUVJy0rAl1PQgiRYnE+UpqfCCFyiEhR9DW5YXR01DpuwzDq0WjU1ZZtUZkYc3wLl7QkmAjdfimXf1nE/m4+n4d8Pr/IFx/lG4eNzs7OoiLKpPoYVqElwURKLhNlzn/CJ0ax/rhardZ9Pp9ljwR5dHQEgUDA7zDqgktJaCCfcEkmYPn18PCw1N3dHYJzYZ4eHx//Y5pmSDFRcDenF+ZlmFNyx0uZQyqVyjM5x+PxtAeDQZXA2v9Kgq9z+QJf4/KraDT6A905jgnngtQ9hCxo35j/AfKZSLDuhqtsvQ8SNwMA/AsjMqbmUsz4jAAAAABJRU5ErkJggg==')

如果返回base64數據沒有前綴data:image/png;base64,的話

要確定后端傳給你的是什么類型的文件

比如是png的話，上面代碼里的mime就硬編碼:image/png

如果是gif的話，上面代碼里的mime就硬編碼:image/gif

JS轉Base64之后的data類型方法如下:

// JS轉Base64之后的data類型getBase64Type(type) {switch (type) {case 'txt': return 'data:text/plain;base64,';case 'doc': return 'data:application/msword;base64,';case 'docx': return 'data:application/vnd.openxmlformats-officedocument.wordprocessingml.document;base64,';case 'xls': return 'data:application/vnd.ms-excel;base64,';case 'xlsx': return 'data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64,';case 'pdf': return 'data:application/pdf;base64,';case 'pptx': return 'data:application/vnd.openxmlformats-officedocument.presentationml.presentation;base64,';case 'ppt': return 'data:application/vnd.ms-powerpoint;base64,';case 'png': return 'data:image/png;base64,';case 'jpg': return 'data:image/jpeg;base64,';case 'gif': return 'data:image/gif;base64,';case 'svg': return 'data:image/svg+xml;base64,';case 'ico': return 'data:image/x-icon;base64,';case 'bmp': return 'data:image/bmp;base64,';}}

獲取文件后綴

getType(file) {var filename = file;var index1 = filename.lastIndexOf(".");var index2 = filename.length;var type = filename.substring(index1 + 1, index2);return type;}

導入

<el-col :span="2" :offset="1"><el-button style="width: 100%" size="medium" @click="clickImport">導入</el-button><input ref="file" type="file" @change="importConfig" accept=".json" style="display: none"></el-col><script> import {saveAs} from 'file-saver'clickImport() {this.$refs.file.click()},// 導入文件importConfig() {let reader = new FileReader()reader.readAsText(this.$refs.file.files[0], 'UTF-8')reader.onload = async () => {// console.log(reader.result)// console.log(btoa(reader.result))if (await safelyImportNodeEnable(btoa(reader.result))) {this.$message.success('導入成功')}}}, </script>

總結

以上是生活随笔為你收集整理的文件的导入和导出的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。