{"id":9162,"date":"2023-02-17T16:46:28","date_gmt":"2023-02-17T08:46:28","guid":{"rendered":"https:\/\/sdeno.com\/?p=9162"},"modified":"2023-02-17T16:49:49","modified_gmt":"2023-02-17T08:49:49","slug":"%e5%af%bc%e5%87%ba%e6%8f%92%e4%bb%b6file-saver-js","status":"publish","type":"post","link":"https:\/\/sdeno.com\/?p=9162","title":{"rendered":"\u5bfc\u51fa\u63d2\u4ef6file-saver.js"},"content":{"rendered":"

\u53ef\u4ee5\u5c06blob\u6570\u636e\u7c7b\u578b\u5bfc\u51fa\u6210\u56fe\u7247\u3001\u8bb0\u4e8b\u672ctxt\uff0c\u4e5f\u53ef\u4ee5\u5c06table\u3001json\u5bfc\u51fa\u6210excel\u3002<\/p>\n

\u5b98\u7f51\uff1ahttps:\/\/github.com\/eligrey\/FileSaver.js<\/a><\/p>\n

\u5728\u7ebf\u6f14\u793a\uff1ahttps:\/\/www.jq22.com\/jquery-info11353<\/a><\/p>\n

 <\/p>\n

table\u5bfc\u51fa\u6210excel\u6848\u4f8b<\/span>\uff1a<\/p>\n

npm install file-saver --save\r\nnpm install xlsx --save\r\n\r\n<\/pre>\n
 <\/p>\n
\/\/\u4ee5elm\u4e3a\u4f8b\uff1a\r\n\u5728 table  \u6dfb\u52a0 id='outTable'\r\n\r\n<el-table  id=\"outTable\"><\/pre>\n
 <\/p>\n
exportform.js \/\/\u5c01\u88c5\u7684\u5bfc\u51fa\u529f\u80fd<\/p>\n
import {\r\n    Message\r\n} from 'element-ui';\r\nimport FileSaver from \"file-saver\";\r\nimport XLSX from \"xlsx\";\r\n\r\nconst exportform = {\r\n    \/*\r\n      bind \u94a9\u5b50\u51fd\u6570\uff0c\u7b2c\u4e00\u6b21\u7ed1\u5b9a\u65f6\u8c03\u7528\uff0c\u53ef\u4ee5\u5728\u8fd9\u91cc\u505a\u521d\u59cb\u5316\u8bbe\u7f6e\r\n      el: \u4f5c\u7528\u7684 dom \u5bf9\u8c61\r\n      value: \u4f20\u7ed9\u6307\u4ee4\u7684\u503c\uff0c\r\n    *\/\r\n    bind(el, {\r\n        value\r\n    }) {\r\n        el.$value = value; \/\/ \u7528\u4e00\u4e2a\u5168\u5c40\u5c5e\u6027\u6765\u5b58\u4f20\u8fdb\u6765\u7684\u503c\uff0c\u56e0\u4e3a\u8fd9\u4e2a\u503c\u5728\u522b\u7684\u94a9\u5b50\u51fd\u6570\u91cc\u8fd8\u4f1a\u7528\u5230\r\n        el.handler = () => {\r\n            if (!el.$value) {\r\n                \/\/ \u503c\u4e3a\u7a7a\u7684\u65f6\u5019\uff0c\u7ed9\u51fa\u63d0\u793a\uff0c\u6211\u8fd9\u91cc\u7684\u63d0\u793a\u662f\u7528\u7684 ant-design-vue \u7684\u63d0\u793a\uff0c\u4f60\u4eec\u968f\u610f\r\n                Message({\r\n                    message: '\u65e0\u6587\u4ef6\u540d!',\r\n                    type: 'warning',\r\n                    customClass: 'zZindex'\r\n                });\r\n                return;\r\n            }\r\n            var workbook = XLSX.utils.table_to_book(document.querySelector(\"#outTable\")); \/\/\u628aDOM TABLE\u5143\u7d20\u8f6c\u6362\u4e3a\u5de5\u4f5c\u7c3f\u5bf9\u8c61\r\n            var worksheet = workbook.Sheets[workbook.SheetNames[0]]; \/\/\u8fd4\u56de\u4e00\u4e2a\u8868\u793a\u5de5\u4f5c\u8868\u7684\u5bf9\u8c61\u3002\r\n            var wopts = { bookType:'xlsx', bookSST:false, type:'array' };\r\n            var wbout = XLSX.write(workbook,wopts);\r\n            try {\r\n                FileSaver.saveAs(\r\n                    new Blob([wbout], {\r\n                        type: \"application\/octet-stream\",\r\n                    }),\r\n                    el.$value + \".xlsx\"\r\n                );\r\n            } catch (e) {\r\n                if (typeof console !== \"undefined\") console.log(e, workbook);\r\n            }\r\n        };\r\n        \/\/ \u7ed1\u5b9a\u70b9\u51fb\u4e8b\u4ef6\uff0c\u5c31\u662f\u6240\u8c13\u7684\u4e00\u952e copy \u5566\r\n        el.addEventListener('click', el.handler);\r\n    },\r\n    \/\/ \u5f53\u4f20\u8fdb\u6765\u7684\u503c\u66f4\u65b0\u7684\u65f6\u5019\u89e6\u53d1\r\n    componentUpdated(el, {\r\n        value\r\n    }) {\r\n        el.$value = value;\r\n    },\r\n    \/\/ \u6307\u4ee4\u4e0e\u5143\u7d20\u89e3\u7ed1\u7684\u65f6\u5019\uff0c\u79fb\u9664\u4e8b\u4ef6\u7ed1\u5b9a\r\n    unbind(el) {\r\n        el.removeEventListener('click', el.handler);\r\n    },\r\n};\r\n\r\nexport default exportform\r\n<\/pre>\n
 <\/p>\n
directives.js \/\/\u8d4b\u503c\u5185\u7f6e\u6307\u4ee4<\/p>\n
import exportform from '.\/exportform.js';\r\n\/\/ \u81ea\u5b9a\u4e49\u6307\u4ee4\r\nconst directives = {\r\n  exportform\r\n};\r\n\r\nexport default {\r\n    install(Vue){\r\n        \/\/\u5904\u7406\u591a\u4e2a\u6307\u4ee4\u7528\u6cd5 \r\n        Object.keys(directives).forEach((key)=>{\r\n            Vue.directive(key,directives[key]);\r\n        })\r\n    }\r\n}\r\n<\/pre>\n
 <\/p>\n
main.js<\/p>\n
import Directives from '.\/directives';    \/\/\u5f15\u5165\u4e0b\u5c31\u597d<\/pre>\n
 <\/p>\n
\u4f7f\u7528\uff01\uff01\uff01\uff01\uff01<\/p>\n
<button v-exportform=\"'\u6211\u662f\u5bfc\u51fa\u7684\u6587\u4ef6\u540d'\">\u70b9\u51fb\u5bfc\u51fa<\/button><\/pre>\n
 <\/p>\n
json\u5bfc\u51fa\u6210excel<\/span><\/p>\n
json\u6570\u636e\u5bfc\u51fa\u6210excel<\/a><\/p><\/blockquote>\n