《vue3中实现将卡片转为图片，展示在world中，并导出world》

1.安装依赖插件

npm install html2canvas docx file-saver

2. 示例组件

<div class="pageCodeDiv" :id="`card-${index}`" :ref="el => cardRefs[index] = el" v-for="(item,index) in currentData" :key="index" style="page-break-after:always;margin-bottom:10px">
              <div class="top-box">
                <ul class="code-list">
                  <li>物料编码: <span class="text-ellipsis">{{ item.itemCode}}</span></li>
                  <li>物料名称: <span class="text-ellipsis">{{ item.itemName}}</span></li>
                  <li>规格: <span class="text-ellipsis">{{ item.specification}}</span></li>
                  <li>型号: <span class="text-ellipsis">{{ item.itemModel}}</span></li>
                  <li>批次号: <span class="text-ellipsis">{{ item.batchNumber}}</span></li>
                  <li>供应商: <span class="text-ellipsis">{{ item.vendorName}}</span></li>
                </ul>
                <div class="code-img">
                  <img :src="item.boxCodeUrl?item.boxCodeUrl:noImg" :srcset="`${item.boxCodeUrl} 1x, ${item.boxCodeUrlHD} 2x`">
                </div>
              </div>
              <div class="bottom-box">
                <div class="bottom-item number">数量: <span class="text-ellipsis">{{item.itemNumber}}</span></div>
                <div class="bottom-item">所用项目: <span class="text-ellipsis">{{item.projectName}}</span></div>
              </div>
          </div>
        </div>

3.定义变量

const currentData = ref({})
const cardRefs = ref([])

4.导出功能函数

import html2canvas from 'html2canvas'
import { Document, Packer, Paragraph, ImageRun ,PageBreak} from 'docx'
import { saveAs } from 'file-saver'

async function exportToWord() {
  try {
    const images = await Promise.all(
      cardRefs.value.map(async (item,index) => {
        const dpr = window.devicePixelRatio > 1 ? 2 : 1;
        const cardEl = document.getElementById(`card-${index}`);
        const canvas = await html2canvas(cardEl, {
          useCORS: true, // 解决跨域图片问题
          scale: dpr 
        })
        return canvas.toDataURL('image/png')
      })
    )
    const imageBuffers = await Promise.all(
      images.map(async (dataUrl) => {
        const response = await fetch(dataUrl)
        const buffer = await response.arrayBuffer()
        return {
          data: new Uint8Array(buffer),
          format: 'png'
        }
      })
    )
    // 创建Word文档
    const doc = new Document({
      sections: [
        {
          properties: {},
          children: imageBuffers.map(image => 
            new Paragraph({
              children: [
                new ImageRun({
                  data: image.data,
                  transformation: {
                    width: '80mm',
                    height: '50mm'
                  }
                }),
                new PageBreak()
              ]
            })
          )
        }
      ]
    })
    Packer.toBlob(doc).then(blob => {
      saveAs(blob, '包装码.docx')
    })
  } catch (error) {
    console.error('导出失败:', error)
  }
}

5.导出功能结束，有一个问题，就是生成图片导出之后，图片像素不太高，有能解决的大佬可以给点建议