cf1557-D. Ezzat and Grid（离散化&线段树&pair复杂度&很多数据结构的基本操作）

### Vue3 实现遍历数组生成卡片并导出到 Word 的解决方案 #### 卡片生成部分 在 Vue3 中可以利用 `v-for` 指令来遍历数组生成多个卡片。以下是基于引用中的 Vuetify 组件结构[^2]，构建一个简单的卡片模板： ```html <template> <div id="card-container"> <v-card flat v-for="(item, index) in items" :key="index" class="mb-4 card-item"> <!-- 卡片标题 --> <v-card-title>{{ item.title }}</v-card-title> <!-- 卡片内容 --> <v-card-text>{{ item.content }}</v-card-text> </v-card> </div> </template> <script> import { ref } from 'vue'; export default { setup() { const items = ref([ { title: 'Card 1', content: 'This is the first card.' }, { title: 'Card 2', content: 'This is the second card.' }, { title: 'Card 3', content: 'This is the third card.' } ]); return { items }; } }; </script> <style scoped> .card-item { width: 300px; } </style> ``` 此代码片段展示了如何通过 `items` 数组动态生成多个卡片。 --- #### 将 HTML 转换为图片 为了将生成的卡片转换为图片格式，可以使用第三方库 **html2canvas** 来完成这一操作。该工具能够捕获 DOM 元素并将它们渲染为 Canvas 图像。 安装依赖： ```bash npm install html2canvas ``` 实现逻辑如下： ```javascript import html2canvas from 'html2canvas'; function convertCardsToImages() { const container = document.getElementById('card-container'); const cards = Array.from(container.querySelectorAll('.card-item')); Promise.all( cards.map((card) => html2canvas(card).then((canvas) => canvas.toDataURL()) ) ).then((images) => console.log(images)); // images 是 Base64 编码的图片列表 } // 在页面加载完成后调用函数 convertCardsToImages(); ``` 以上代码实现了对每个 `.card-item` 进行截图，并返回一组 Base64 格式的图像数据。 --- #### 导出到 Word 文档 要将生成的图片嵌入到 Word 文件中，推荐使用 JavaScript 库 **docx** 或者 **mammoth.js**。这里以 **docx** 为例说明具体实现方法。 安装 docx： ```bash npm install @ezzat/docx ``` 创建 Word 文档并插入图片： ```javascript import { Packer, Paragraph, ImageRun } from '@ezzat/docx'; import fs from 'fs'; async function exportToWord(imageUrls) { const doc = new Document(); imageUrls.forEach(async (imageUrl) => { try { const buffer = await fetch(imageUrl.replace(/^data:image\/\w+;base64,/, '')).then(res => res.arrayBuffer()); doc.addSection({ children: [ new Paragraph({ children: [new ImageRun({ data: Buffer.from(buffer), transformation: { width: 400, height: 300 } })], }), ], }); } catch (error) { console.error(error); } }); const packer = new Packer(); packer.toBlob(doc).then((blob) => { saveAs(blob, 'cards.docx'); // 使用 FileSaver.js 提供的 saveAs 函数保存文件 }); } // 假设已获取到 Base64 图片 URL 列表 const base64ImageList = ['...']; // 替换为实际的 Base64 数据 exportToWord(base64ImageList); ``` 注意：需要引入额外的库如 **FileSaver.js** 才能支持浏览器端下载功能。 --- ### 总结 整个流程分为三个主要阶段： 1. 使用 Vue3 和 `v-for` 动态生成卡片。 2. 利用 **html2canvas** 把每张卡片转为图片。 3. 结合 **docx** 创建包含这些图片的 Word 文档并提供下载链接。 ---