Vue3如何导入JS文件的Google Sheets API数据并渲染到页面DOM

1. 取消googleapis的require后页面卡住 #

原因 #

googleapis是Node.js服务端专用依赖，依赖大量Node.js内置模块，浏览器环境不支持这些模块，直接在前端Vue项目中引入会触发运行异常，导致页面卡住。

修复方案 #

不要在前端代码中使用这个包，二选一处理：

• 把Google Sheets API的请求逻辑迁移到后端接口，前端直接调用后端接口拿处理好的表格数据，同时还能避免把密钥暴露在前端代码中。
• 直接用fetch/axios请求Google Sheets的公开API端点，不要用node适配版的googleapis包。

2. 导入JS文件函数提示不存在 #

原因 #

你在google-sheets-api.js中用的是export default默认导出对象，但Vue组件里用了{ getJWTClient, gsrun }命名导入的语法，两者不匹配所以找不到导出内容。

修复方案（二选一即可） #

方案A：修改Vue组件的导入逻辑

把<script>里的导入代码替换为：

import gsheetApi from '../store/google-sheets-api.js'
const { getJWTClient, gsrun } = gsheetApi

方案B：修改google-sheets-api.js的导出逻辑

把文件末尾的导出代码替换为：

export {
  getJWTClient,
  gsrun
}

3. 返回数据无字段名/遍历渲染问题 #

原因 #

Google Sheets API返回的values是二维数组，第一行通常是表头内容，后续行是对应的数据行，没有自带字段映射。

处理方法 #

拿到返回数据后手动转成带字段名的对象数组，方便渲染：

// 示例代码，可放在拿到数据的回调里
mounted() {
  getJWTClient().then((client) => {
    gsrun(client).then((data) => {
      // 处理数据：第一行作为表头
      const headers = data[0]
      // 从第二行开始拼接成对象数组
      this.sheetDatas = data.slice(1).map(row => {
        return row.reduce((res, val, idx) => {
          res[headers[idx]] = val
          return res
        }, {})
      })
    })
  }).catch(err => console.log(err))
}

同时把data里的sheetDatas初始值改成数组，避免遍历报错：

data: () => {
  return {
    sheetDatas: []
  }
}

渲染的时候可以直接取对应字段：

<div v-for="(item, index) in sheetDatas" :key="index">
  {{item.你的表头字段名}}
</div>

内容的提问来源于stack exchange，提问作者user9542422