个人中心
gpt4 book ai didi

javascript - 将 PDF 作为 Blob 从 Azure 传递到 Node 以进行 React

转载 作者：行者123 更新时间：2023-12-02 07:23:09 24 4
gpt4 key购买 nike

我正在尝试通过 Node 后端获取存储在 Azure Blob 存储中的 PDF，然后将该 PDF 文件提供给 React 前端。我将 Microsoft 的 @azure/storage-blob 与 BlockBlobClient 结合使用，但我在网上找到的每个示例都将 readStreamBody 转换为字符串。该 blob 的内容类型为 application/pdf。我尝试将 readStreamBody 和纯输出传递到前端，但这些会导致 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);
      });
  }

最佳答案

这可能对你有帮助，对我有用。

Node 

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>

关于javascript - 将 PDF 作为 Blob 从 Azure 传递到 Node 以进行 React，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61032852/

24 4 0
文章推荐： AzureDevOps - 创建通用团队
文章推荐： azure - 与 AAD 断开连接后无法看到我的 Azure DevOps 组织
文章推荐： azure - az devops login 无法使用 key 环存储 PAT；回退到文件存储
文章推荐： sql - Azure 逻辑应用、SQL 更新行 v2
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com