vue 预览携带图片的excel问题

Question

vue 预览excel xls 文件 使用luckyexcel 不携带图片正常展示，携带图片（不在单元格内）luckyexcel 的方法transformExcelToLucky，无法读出。

使用@vue-office/excel 不知道为啥一直无法显示，就算是不携带图片也无法预览，该组件携带的两个方法rendered和error无任何反应

以下是关于@vue-office/excel的代码片段

<template>
<vue-office-docx
            :src="excel"
            style="height: 100vh;"
            @rendered="renderedHandler"
            @error="errorHandler"
        />
</template>

import VueOfficeDocx from "@vue-office/excel";
components: {
        VueOfficeDocx
    },
data()
{
  return {
       excel: ""
   }
}
methods: {
  getExcel()
{
  FileRepo.downFile(url, fileName).then(res =>
            {
  let url = "";
let fileName ="";
                const files = new window.File([res.data], `${fileName}`, { type: "application/vnd.ms-excel;charset=utf-8" });
                files.arrayBuffer().then(respose =>
                {
                    this.excel = respose;
                    console.log(respose);
                });
 });
},
  errorHandler(err)
          {
            console.log(err);
        },
        renderedHandler(ss)
        {
            console.log(ss);
        }
}

Answer 1

🌈🌈🌈参考通义千问和郭老师的小迷弟雅思莫了-编写提供🌈🌈🌈
您可以参考如下，如果回答的不正确，及时评论区回复我，我会根据你错误描述追加回复，直到您满意为止。

首先，luckyexcel库目前并不支持图片预览，所以如果你的Excel文件包含图片，你可能需要寻找其他解决方案。@vue-office/excel库理论上应该支持图片预览，但你需要确保正确配置和使用它。

根据你的代码片段，我注意到你只定义了excel数据但没有赋值。你需要确保传递给VueOfficeDocx组件的src属性是一个有效的URL或Blob对象。以下是一个完整的示例，假设你已经通过axios或其他方式获取到Excel文件的二进制数据：

<template>
  <vue-office-docx
    :src="excelBlob"
    style="height: 100vh;"
    @rendered="renderedHandler"
    @error="errorHandler"
  />
</template>

<script>
import VueOfficeDocx from "@vue-office/excel";
import axios from "axios";

export default {
  components: {
    VueOfficeDocx,
  },
  data() {
    return {
      excelBlob: null,
    };
  },
  methods: {
    async loadExcel() {
      try {
        const response = await axios.get("/api/download/excel", {
          responseType: "blob", // 从后端获取二进制数据
        });
        this.excelBlob = new Blob([response.data], {
          type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
        });
      } catch (err) {
        this.errorHandler(err);
      }
    },
    errorHandler(err) {
      console.error("Error loading Excel file:", err);
    },
    renderedHandler() {
      console.log("Excel file rendered");
    },
  },
  mounted() {
    this.loadExcel();
  },
};
</script>

在这个例子中，我们首先从服务器获取Excel文件的二进制数据，并将其转换为Blob对象，然后将Blob对象赋值给excelBlob。axios.get的responseType设置为"blob"以确保我们得到二进制数据。

请确保你的后端API /api/download/excel返回正确的二进制数据，并且根据你的实际需求调整这个API路径。

如果问题仍然存在，可能需要检查@vue-office/excel库的版本和兼容性，或者查看浏览器的开发者控制台以获取更详细的错误信息。