Requirement: Make the page into an ideal style, export the desired part of the page into word, no need to write a template, just export according to the current page style. (simple version)
Nanny Level Tutorial:
Step 1: Install the required dependencies
npm install html-docx-js -S
npm install file-saver -SStep 2: Give the container that exports that part an id name
<el-dialog
width="40%"
title="行程信息"
:visible.sync="innerVisible"
append-to-body
>
<div id="myContainer">
<!-- 此处省去一万字 -->
</div>
</el-dialog>Step 3: Introduce dependencies where needed
import FileSaver from "file-saver";
import htmlDocx from "html-docx-js/dist/html-docx";Step 4: Get the dom node myContainer and export it (the inline style I wrote)
/**导出data */
exportWord() {
let contentHtml = document.getElementById("route-detail").innerHTML;
let content = `
<!DOCTYPE html><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<table>
${contentHtml}
</table>
</body>
</html>`;
let converted = htmlDocx.asBlob(content);
FileSaver.saveAs(converted, "行程" + this.form.tripName + ".docx");
},
final effect:
preview:
export word:
