发送 POST 请求，在 return 中接收 PDF 并将其保存到 NativeScript 中的文件系统

Question

我想将包含 JSON 的 POST 请求发送到服务器进行处理。然后服务器将 return 我想接收的 PDF，保存到文件系统并使用我从服务器响应中获得的 nativescript-pdf-view. However, File.writeSync() will not accept the ArrayBuffer 显示。相反，它需要本地变体 NSData (iOS) 和 ByteArray (Android)。如何将 ArrayBuffer 转换为本机字节数组？

Answer 1

正在发送 POST 请求

如官方文档所述，可以使用 getBinary() 函数发送 POST 请求：

import { getBinary } from 'tns-core-modules/http'

getBinary({
  url: 'https://example.com/foo/bar/generate-pdf',
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  content: JSON.stringify(someObject),
})

这里，someObject是你要转换成JSON并发送到服务器的对象。

接收、转换和保存文件/PDF

响应将包含 PDF 或任何其他文件，因为 ArrayBuffer. As mentioned in the question, the File.writeSync() 方法需要 NSData (iOS) 和 ByteArray (Android)。因此，我们需要获取一个文件处理程序，转换我们的文件并将其保存到文件系统。

import { getBinary } from 'tns-core-modules/http'
import { isAndroid } from 'tns-core-modules/platform'
import { File, knownFolders, path } from 'tns-core-modules/file-system'

getBinary({
  url: 'https://example.com/foo/bar/generate-pdf',
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  content: JSON.stringify(someObject),
}).then((buffer) => {

  // Get file handler
  const documentsFolder = knownFolders.documents()
  const destination = path.join(documentsFolder.path, 'result.pdf')
  const file = File.fromPath(destination)

  // Convert buffer to byte array
  let byteArray
  if (isAndroid) {
    byteArray = Array.create('byte', buffer.byteLength)
    for (let i = 0; i < buffer.length; i++) {
      byteArray[i] = new java.lang.Byte(buffer[i])
    }
  } else {
    byteArray = NSData.dataWithBytesLength(buffer, buffer.byteLength)
  }

  // Save file
  file.writeSync(byteArray, (error) => {
    console.log(error)
  });
})

为什么 File.writeSync() 方法不能自动转换这个对我来说是个奇迹。也许其他人可以解释！

显示 PDF

要显示 PDF，您可以使用 nativescript-pdf-view。只需使用文件处理程序获取路径 file.path 或 destination 变量并将其传递给 PDFView 组件的 src 属性。这可能看起来像这样：

<template>
  <Page>
    <ActionBar title="PDF" />
    <GridLayout rows="*" columns="*">
      <PDFView :src="path" row="0" col="0" />
    </GridLayout>
  </Page>
</template>

<script lang="ts">
export default {
  name: 'PdfViewer',
  props: {
    path: {
      type: String,
      required: true,
    },
  },
}
</script>

一定要安装好插件，当然还要引入元素Vue.js，首先：

// main.ts

Vue.registerElement('PDFView', () => require('nativescript-pdf-view').PDFView)

发送 POST 请求，在 return 中接收 PDF 并将其保存到 NativeScript 中的文件系统

Send a POST request, receive a PDF in return and save it to the filesystem in NativeScript

nativescript-vue

正在发送 POST 请求

接收、转换和保存文件/PDF

显示 PDF