vue2中marked插件将Markdown内容转换为word格式内容

在Vue2中使用`marked`插件可将Markdown内容转换为HTML，若要进一步将其转换为Word格式内容，可借助`docxtemplater`库。以下是具体实现步骤和代码示例： ### 安装依赖 需安装`marked`和`docxtemplater`及其相关依赖。 ```bash npm install marked docxtemplater pizzip pizzip-utils file-saver ``` ### 实现代码 ```vue <template> <div> <textarea v-model="markdownContent" placeholder="请输入Markdown内容"></textarea> <button @click="convertToWord">转换为Word</button> </div> </template> <script> import marked from 'marked'; import Docxtemplater from 'docxtemplater'; import PizZip from 'pizzip'; import { saveAs } from 'file-saver'; import { loadFile } from 'pizzip-utils'; export default { data() { return { markdownContent: '', }; }, methods: { convertToWord() { // 使用marked将Markdown转换为HTML const htmlContent = marked(this.markdownContent); // 创建一个简单的Word模板 const templateXml = ` <w:document xmlns:w="http://schemas.openxmlformats.org/wordprocessingml/2006/main"> <w:body> <w:p> <w:r> <w:t>${htmlContent}</w:t> </w:r> </w:p> </w:body> </w:document> `; // 创建一个新的PizZip实例 const zip = new PizZip(); zip.file('word/document.xml', templateXml); // 创建一个Docxtemplater实例 const doc = new Docxtemplater(zip); // 渲染模板 doc.render(); // 生成Word文件 const out = doc.getZip().generate({ type: 'blob', mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', }); // 保存文件 saveAs(out, 'markdown_converted.docx'); }, }, }; </script> ``` ### 代码解释 1. **安装依赖**：使用`npm`安装`marked`、`docxtemplater`、`pizzip`、`pizzip-utils`和`file-saver`。 2. **模板部分**：包含一个文本框用于输入Markdown内容，以及一个按钮用于触发转换操作。 3. **脚本部分**： - 引入所需的库。 - 在`data`中定义`markdownContent`用于存储用户输入的Markdown内容。 - `convertToWord`方法实现转换逻辑： - 使用`marked`将Markdown内容转换为HTML。 - 创建一个简单的Word模板，将HTML内容插入其中。 - 使用`PizZip`创建一个新的压缩包，并将模板文件添加到其中。 - 使用`Docxtemplater`渲染模板。 - 生成Word文件的`blob`对象。 - 使用`file-saver`保存文件。