根據產品需求，需要將頁面內容下載成可編輯的Word文件
1.插件依賴
// 注意：file-saver 依賴 Blob 對象 import { saveAs } from 'file-saver'; // htmlDocx 的作用就是將html字符串轉成Blob對象 import htmlDocx from 'html-docx-js/dist/html-docx';
2.生成Word文件並下載至本地
/** * 1.導出局部的html頁面 * @param {} dom 局部的html頁面 * @param {*} fileName 導出文件的名稱 * @param {*} title */ export const exportDocx = (dom, fileName, config, { title = document.title, width } = {}) => { if (!dom) return; config = config || {}; let copyDom = document.createElement('span'); const titleDom = document.createElement('title'); titleDom.innerText = title; copyDom.appendChild(titleDom); const cloneDom = dom.cloneNode(true); if (width) { const domTables = cloneDom.getElementsByTagName('table'); if (domTables.length) { for (const table of domTables) { table.style.width = width + 'px'; } } } copyDom.appendChild(cloneDom); const htmlTemp = copyDom.innerHTML; copyDom = null; const iframeDom = document.createElement('iframe'); const attrObj = { height: 0, width: 0, border: 0, wmode: 'Opaque', }; const styleObj = { position: 'absolute', top: '-999px', left: '-999px', }; Object.entries(attrObj).forEach(([key, value]) => { iframeDom.setAttribute(key, value); }); Object.entries(styleObj).forEach(([key, value]) => { iframeDom.style[key] = value; }); document.body.insertBefore(iframeDom, document.body.children[0]); const iframeWin = iframeDom.contentWindow; // 1.獲取iframe中的window const iframeDocs = iframeWin.document; // 2.獲取iframe中的document iframeDocs.write(`<!doctype html>`); iframeDocs.write(htmlTemp); const htmlStyle = ` table{ table-layout: fixed; } td{ word-wrap: break-word; } `; const htmlDocContent = `<!DOCTYPE html><html><head><meta charset="UTF-8"><style></style></head><body style="text-indent:30px">${iframeDocs.documentElement.innerHTML}</body></html>`; var converted = htmlDocx.asBlob(htmlDocContent, config); saveAs(converted, fileName + '.docx'); document.body.removeChild(iframeDom); };
<div id="downloadWord"> <div>word 需要下載的內容</div> <div>word 需要下載的內容</div> <div>word 需要下載的內容</div> </div> <Button onClick={() => {
exportDocx(document.querySelector('#downloadWord'), 'docxName', {
margins: { left: 300, right: 300, top: 300, bottom: 150 },
});
>下載</Button>
注：通過此方法下載的 Word文件 在不編輯Word和另存為新Word文件情況下，無法通過獲取Word格式獲取文件內容