將 PDF 作為 Blob 從 Azure 傳遞到節點以進行反應

Question

我正在嘗試通過節點后端獲取存儲在 Azure Blob 存儲中的 PDF，然后將該 PDF 文件提供給 React 前端。 我正在使用 Microsoft @azure/storage-blob和 BlockBlobClient，但我在網上找到的每個示例都將readableStreamBody轉換為字符串。 該 blob 的內容類型為application/pdf 。 我嘗試將readableStreamBody和純 output 傳遞到前端，但這些會導致 pdf 損壞。 我還關注了在線文檔並將其設為字符串並將其傳遞給前端。 這產生了一個 PDF 可以打開並具有適當數量的頁面，但完全空白。

Node.js 后端代碼

   app.get('/api/file/:company/:file', (req, res) => {
  const containerClient = blobServiceClient.getContainerClient(req.params.company);
  const blockBlobClient = containerClient.getBlockBlobClient(req.params.file);
  blockBlobClient.download(0)
    .then(blob => streamToString(blob.readableStreamBody))
    .then(response => res.send(response))
});

前端代碼

getFileBlob = (company,file) => {
    axios(`/api/file/${company}/${file}`, { method: 'GET', responseType: 'blob'})
      .then(response => {
        const file = new Blob(
          [response.data],
          {type: 'application/pdf'});
        const fileURL = URL.createObjectURL(file);
        window.open(fileURL);
      })
      .catch(error => {
        console.log(error);
      });
  }

Answer 1

這可能會幫助你，它對我有用。

節點

var express = require('express');
const { BlobServiceClient } = require('@azure/storage-blob');

var router = express.Router();


const AZURE_STORAGE_CONNECTION_STRING = 
'YOUR_STRING';
async function connectAzure() {

// Create the BlobServiceClient object which will be used to create a container         client
const blobServiceClient = BlobServiceClient.fromConnectionString(
  AZURE_STORAGE_CONNECTION_STRING
);

const containerName = 'filestorage';
  const blobName = 'sample.pdf';
  console.log('\nConnecting container...');
  console.log('\t', containerName);

  // Get a reference to a container
  const containerClient = blobServiceClient.getContainerClient(containerName);

  // Get a block blob client
  const blockBlobClient = containerClient.getBlockBlobClient(blobName);
  for await (const blob of containerClient.listBlobsFlat()) {
    console.log('\t', blob.name);
  }

  const downloadBlockBlobResponse = await blockBlobClient.download(0); 
    const data = await streamToString(downloadBlockBlobResponse.readableStreamBody)
    return data;

    }

async function streamToString(readableStream) {
  return new Promise((resolve, reject) => {
    const chunks = [];
    readableStream.on('data', data => {
      chunks.push(data.toString());
    });
    readableStream.on('end', () => {
      resolve(chunks.join(''));
    });
    readableStream.on('error', reject);
  });
}

  router.get('/', async function(req, res, next) {
    const data = await connectAzure();
    res.send({data}).status(200);
  });


module.exports = router;

前端

function createFile() {
fetch('/createfile').then(res => {
    res.json().then(data => {
        var blob = new Blob([data.data], { type: 'application/pdf' });
        var fileURL = URL.createObjectURL(blob);
        if (filename) {
            if (typeof a.download === 'undefined') {
                window.location.href = fileURL;
            } else {
                window.open(fileURL, '_blank');
            }
        }
    })
}).catch(err => console.log(err))
}

HTML

<body><h1>Express</h1><p>Welcome to Express</p><button    onclick="createFile()">Create File</button></body>

將 PDF 作為 Blob 從 Azure 傳遞到節點以進行反應

問題描述

1 個解決方案

解決方案1
0 2021-06-28 07:51:09

將 PDF 作為 Blob 從 Azure 傳遞到節點以進行反應

問題描述

1 個解決方案

解決方案1 0 2021-06-28 07:51:09

解決方案1
0 2021-06-28 07:51:09