{"id":238,"date":"2023-03-23T10:44:52","date_gmt":"2023-03-23T02:44:52","guid":{"rendered":"https:\/\/yichenghui.net\/?p=238"},"modified":"2023-03-23T10:44:52","modified_gmt":"2023-03-23T02:44:52","slug":"%e7%ba%af%e5%89%8d%e7%ab%af%e7%94%9f%e6%88%90excel%e6%96%87%e4%bb%b6","status":"publish","type":"post","link":"https:\/\/yichenghui.net\/index.php\/2023\/03\/23\/%e7%ba%af%e5%89%8d%e7%ab%af%e7%94%9f%e6%88%90excel%e6%96%87%e4%bb%b6\/","title":{"rendered":"\u7eaf\u524d\u7aef\u751f\u6210excel\u6587\u4ef6"},"content":{"rendered":"\n<pre class=\"wp-block-preformatted\">&lt;template>\r\n    &lt;div>\r\n        &lt;el-button type=\"primary\" @click=\"click\">\u6309\u94ae&lt;\/el-button>\r\n        &lt;div v-html=\"table\">&lt;\/div>\r\n    &lt;\/div>\r\n&lt;\/template>\r\n&lt;script>\r\nimport form from \"..\/components\/form.vue\"\r\nimport { reactive, toRefs } from \"vue\";\r\n\/\/ \u8f93\u51fabase64\u7f16\u7801\r\nfunction base64(str) {\r\n    return window.btoa(unescape(encodeURIComponent(str)))\r\n};\r\nfunction createTable(fields, data) {\r\n    const header = fields.map(({ label }) => `&lt;td>${label}&lt;\/td>`).join(\"\");\r\n\r\n    const fieldsArr = fields.map(({ prop }) => prop);\r\n\r\n    const body = data.map(dataItem => {\r\n        const tds = fieldsArr.map(fieldItem => `&lt;td>${dataItem[fieldItem]}&lt;\/td>`).join(\"\")\r\n        return `&lt;tr>${tds}&lt;\/tr>`\r\n    }).join(\"\");\r\n\r\n    \/\/ Worksheet\u540d\r\n    const worksheet = 'Sheet1';\r\n    const table = `\r\n        &lt;table border=\"1\" cellpadding=\"0\">\r\n            ${header}\r\n            ${body}\r\n        &lt;\/table>`;\r\n    const template = `\r\n            &lt;html xmlns:o=\"urn:schemas-microsoft-com:office:office\" \r\n                xmlns:x=\"urn:schemas-microsoft-com:office:excel\" \r\n                xmlns=\"http:\/\/www.w3.org\/TR\/REC-html40\"\r\n            >\r\n                &lt;head>\r\n                    &lt;!--[if gte mso 9]>\r\n                    &lt;xml>&lt;x:ExcelWorkbook>&lt;x:ExcelWorksheets>&lt;x:ExcelWorksheet>\r\n                    &lt;x:Name>${worksheet}&lt;\/x:Name>\r\n                    &lt;x:WorksheetOptions>&lt;x:DisplayGridlines\/>&lt;\/x:WorksheetOptions>&lt;\/x:ExcelWorksheet>\r\n                    &lt;\/x:ExcelWorksheets>&lt;\/x:ExcelWorkbook>&lt;\/xml>\r\n                    &lt;![endif]-->\r\n                &lt;\/head>\r\n                &lt;body>\r\n                    ${table}\r\n                &lt;\/body>\r\n            &lt;\/html>`;\r\n    window.location.href = `data:application\/vnd.ms-excel;base64,${base64(template)}`;\r\n    return table;\r\n}\r\nexport default {\r\n    components: {\r\n        myForm: form\r\n    },\r\n    setup() {\r\n        const state = reactive({\r\n            fields: [\r\n                { prop: \"date\", label: \"Date\" },\r\n                { prop: \"name\", label: \"Name\" },\r\n                { prop: \"address\", label: \"Address\" },\r\n            ],\r\n            tableData: [\r\n                {\r\n                    date: '2016-05-03',\r\n                    name: 'Tom',\r\n                    address: 'No. 189, Grove St, Los Angeles',\r\n                },\r\n                {\r\n                    date: '2016-05-02',\r\n                    name: 'Tom',\r\n                    address: 'No. 189, Grove St, Los Angeles',\r\n                },\r\n                {\r\n                    date: '2016-05-04',\r\n                    name: 'Tom',\r\n                    address: 'No. 189, Grove St, Los Angeles',\r\n                },\r\n                {\r\n                    date: '2016-05-01',\r\n                    name: 'Tom',\r\n                    address: 'No. 189, Grove St, Los Angeles',\r\n                },\r\n            ],\r\n            table: \"\",\r\n        });\r\n        const click = () => {\r\n            const table = createTable(state.fields, state.tableData);\r\n            state.table = table;\r\n        }\r\n        return {\r\n            ...toRefs(state),\r\n            click,\r\n        }\r\n    }\r\n}\r\n&lt;\/script><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>&lt;template> &lt;div> &lt;el-button type=&#8221;primary&#8221; @cl &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/yichenghui.net\/index.php\/2023\/03\/23\/%e7%ba%af%e5%89%8d%e7%ab%af%e7%94%9f%e6%88%90excel%e6%96%87%e4%bb%b6\/\" class=\"more-link\">\u7ee7\u7eed\u9605\u8bfb<span class=\"screen-reader-text\">\u201c\u7eaf\u524d\u7aef\u751f\u6210excel\u6587\u4ef6\u201d<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_kadence_starter_templates_imported_post":false,"footnotes":""},"categories":[4],"tags":[],"class_list":["post-238","post","type-post","status-publish","format-standard","hentry","category-javascript"],"_links":{"self":[{"href":"https:\/\/yichenghui.net\/index.php\/wp-json\/wp\/v2\/posts\/238","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/yichenghui.net\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/yichenghui.net\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/yichenghui.net\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/yichenghui.net\/index.php\/wp-json\/wp\/v2\/comments?post=238"}],"version-history":[{"count":1,"href":"https:\/\/yichenghui.net\/index.php\/wp-json\/wp\/v2\/posts\/238\/revisions"}],"predecessor-version":[{"id":239,"href":"https:\/\/yichenghui.net\/index.php\/wp-json\/wp\/v2\/posts\/238\/revisions\/239"}],"wp:attachment":[{"href":"https:\/\/yichenghui.net\/index.php\/wp-json\/wp\/v2\/media?parent=238"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/yichenghui.net\/index.php\/wp-json\/wp\/v2\/categories?post=238"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/yichenghui.net\/index.php\/wp-json\/wp\/v2\/tags?post=238"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}