vue excel预览

在Vue中实现Excel在线预览有多种方案。方案1是使用Office官方自带的URL，将要预览的Excel地址拼接到Office的链接后面，通过生成的新链接直接访问。这种方案可能会涉及到数据隐私问题，需要谨慎使用。\[1\]

方案2是通过js-xlsx插件实现，在项目中引入该插件，并使用相关代码进行Excel的解析和渲染。具体代码如下：

import axios from 'axios'
import XLSX from "xlsx";

export default {
  data() {
    return {
      tableau: null,
    }
  },
  mounted() {
    axios.get('/xlsx', {
      responseType: "arraybuffer",
    }).then(({ data }) => {
      let workbook = XLSX.read(new Uint8Array(data), { type: "array" });
      var worksheet = workbook.Sheets\[workbook.SheetNames\[0\]\];
      this.tableau = XLSX.utils.sheet_to_html(worksheet);
    })
  }
}

在Vue组件中，可以使用`v-html`指令将解析后的Excel数据渲染到页面上，实现在线预览。\[2\]

另外，还可以使用其他插件或库来实现Excel的在线预览，具体方案可以根据项目需求和实际情况选择。
#### 引用[.reference_title]
- *1* *2* [Vue+SpringBoot实现Excel在线预览功能（PS：添加样式比较费劲）](https://blog.csdn.net/xiaofeiwei521/article/details/122614246)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [vue项目实现常见的三种文件类型在线预览（pdf/word文件excel表格）](https://blog.csdn.net/weixin_52103939/article/details/122447620)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]