将变量(而不是表单提交)中的数据发送到Google工作表

时间:2019-06-03 11:38:46

标签: javascript vue.js google-apps-script google-sheets

我是Vue.js和javascript的新手。我正在尝试将一些数据发送到Google工作表,但没有成功。

我找到了一些有关如何发布数据的信息,但是我的数据没有存储在表单中。因此,我为要发布的数据添加了一个空的“表单”,但没有运气。

这是来源: https://github.com/jamiewilson/form-to-google-sheets 和: Is it possible to send js variables to google sheets? (Not form data)

这是我发布数据的方式:

saveToGoogleSheet () {
  const scriptURL = 'https://script.google.com/macros/s/.../exec'
  const form = ''
  var sendingData = new FormData(form)
  sendingData.append('starRating', this.feedbackData.starRating)

  fetch(scriptURL, {method: 'POST', body: new FormData(sendingData)})
    .then(response => console.log('Success!', response))
    .catch(error => console.error('Error!', error.message))
}

这是Google脚本

var sheetName = 'Sheet1'
var scriptProp = PropertiesService.getScriptProperties()

function intialSetup () {
  var activeSpreadsheet = SpreadsheetApp.getActiveSpreadsheet()
  scriptProp.setProperty('key', activeSpreadsheet.getId())
}

function doPost (e) {
  var lock = LockService.getScriptLock()
  lock.tryLock(10000)

  try {
    var doc = SpreadsheetApp.openById(scriptProp.getProperty('key'))
    var sheet = doc.getSheetByName(sheetName)

    var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0]
    var nextRow = sheet.getLastRow() + 1

    var newRow = headers.map(function(header) {
      return header === 'timestamp' ? new Date() : e.parameter[header]
    })

    sheet.getRange(nextRow, 1, 1, newRow.length).setValues([newRow])

    return ContentService
      .createTextOutput(JSON.stringify({ 'result': 'success', 'row': nextRow }))
      .setMimeType(ContentService.MimeType.JSON)
  }

  catch (e) {
    return ContentService
      .createTextOutput(JSON.stringify({ 'result': 'error', 'error': e }))
      .setMimeType(ContentService.MimeType.JSON)
  }

  finally {
    lock.releaseLock()
  }
}

运行我的应用程序后,我收到一条成功消息:

Success!
Response {type: "cors", url: "https://script.googleusercontent.com/macros/echo?u…xxx", redirected: true, status: 200, ok: true, …}
body: ReadableStream
bodyUsed: false
headers: Headers
__proto__: Headers
ok: true
redirected: true
status: 200
statusText: ""
type: "cors"
url: "https://script.googleusercontent.com/macros/echo?user_content_key=..."
__proto__: Response

但不会填充Google电子表格,但是如果我进行console.log记录,则数据仍然存在。

1)我在做什么错了?

2)另外,有没有一种方法可以在不附加空表格的情况下发送数据?

3)最后,如果我想发送更多数据怎么办?

sendingData.append({
  'starRating' = this.feedbackData.starRating
  'nowReading' = this.feedbackData.nowReading
})

还是我需要做的事情:

sendingData.append('starRating', this.feedbackData.starRating)
sendingData.append('nowReading', this.feedbackData.nowReading)

还是什么?

-更新-

发布问题后,我决定重新开始使用Google表格。结果是现在我确实将数据发布到工作表中,但是尽管数据在发布前后都存在,但它还是“未定义的”:

console.log(this.feedbackData)
this.saveToGoogleSheet()
console.log(this.feedbackData)

我已经按照上面的方法尝试过单个变量,或者一次发布所有变量(大多数变量在发布时为“未定义”),如下所示:

saveToGoogleSheet () {
  const scriptURL = 'https://script.google.com/macros/s/.../exec'
  fetch(scriptURL, {method: 'POST', body: JSON.stringify(this.feedbackData)})
    .then(response => console.log('Success!', response))
    .catch(error => console.error('Error!', error.message))
}

并这样:

saveToGoogleSheet () {
  const scriptURL = 'https://script.google.com/macros/s/.../exec'
  fetch(scriptURL, {method: 'POST', body: this.feedbackData})
    .then(response => console.log('Success!', response))
    .catch(error => console.error('Error!', error.message))
}

但结果是相同的。

我的JSON.stringify(this.feedbackData)看起来像这样:

{"userName":"","userNumber":"","friendName":"","friendNumber":"","inviteMessage":"","nowReading":"S2/E1/","starRating":"4"}

2 个答案:

答案 0 :(得分:0)

  • 您已经部署了Web Apps来接受价值。
  • 您要通过将{"userName":"","userNumber":"","friendName":"","friendNumber":"","inviteMessage":"","nowReading":"S2/E1/","starRating":"4"}的对象与Javascript fetch()发送来将值放入电子表格,如下图所示。

enter image description here

如果我的理解是正确的,那么该修改如何?

修改点:

  • 使用POST方法发送该值时,可以使用e.postData.contentse的{​​{1}}中检索该值。
    • 但是在这种情况下,该值需要作为字符串发送。因此,请使用doPost(e)
    • 因此,请在JSON.parse()侧使用body: JSON.stringify(this.feedbackData)}

修改后的脚本:

请进行如下修改。

Google Apps脚本:

从:
fetch()
至:
var newRow = headers.map(function(header) {
  return header === 'timestamp' ? new Date() : e.parameter[header]
})

Javascript:

请在问题中使用上面“更新”部分的脚本。

var params = JSON.parse(e.postData.contents); // Added
var newRow = headers.map(function(header) {
  return header === 'timestamp' ? new Date() : params[header]; // Modified
});

注意:

  • 当您修改Web Apps的Google Apps脚本时,请将Web Apps部署为新版本。这样,最新脚本将反映到Web Apps。请注意这一点。
  • 我不确定您的实际电子表格。如果与上图不同,请根据您的情况修改脚本。

参考:

如果我误解了您的问题,而这不是您想要的结果,我深表歉意。

答案 1 :(得分:0)

我发现了问题:

在这里:

saveToGoogleSheet () {
  const scriptURL = 'https://script.google.com/macros/s/.../exec'
  const form = ''
  var sendingData = new FormData(form)
  sendingData.append('starRating', this.feedbackData.starRating)

  fetch(scriptURL, {method: 'POST', body: new FormData(sendingData)})
    .then(response => console.log('Success!', response))
    .catch(error => console.error('Error!', error.message))
}

我应该更改它:

fetch(scriptURL, {method: 'POST', body: new FormData(sendingData)})

对此:

fetch(scriptURL, {method: 'POST', body: sendingData})

此外,如果我放const form = '',就不需要var sendingData = new FormData('')