如何将react-pdf/renderer显示的PDF上传到aws s3存储并使用s3链接下载该PDF

Question

大家好，我正在使用react-pdf/renderer react pdf在我的react应用程序上渲染pdf，现在我想把渲染的pdf直接上传到aws s3存储我已经成功地制作了一个api来上传文件到s3存储，它在邮差中工作得很好。我可以上传文件到s3使用输入类型的文件，但我想上传渲染pdf直接到存储以后检索在我的应用程序。共享锅炉反应-pdf模板我找到了一些解决方案，如将react-pdf转换为缓冲区和流，但我没有得到任何足够的资源或解决方案。

import React from 'react';
import { Page, Text, View, Document, StyleSheet } from '@react-pdf/renderer';
// Create styles
const styles = StyleSheet.create({
page: {
flexDirection: 'row',
backgroundColor: '#E4E4E4'
},
section: {
margin: 10,
padding: 10,
flexGrow: 1
}
});
// Create Document Component
const MyDocument = () => (
<Document>
<Page size="A4" style={styles.page}>
<View style={styles.section}>
<Text>Section #1</Text>
</View>
<View style={styles.section}>
<Text>Section #2</Text>
</View>
</Page>
</Document>
);

后端代码

const aws = require('aws-sdk')
const multer = require('multer')
const multerS3 = require('multer-s3');

aws.config.update({
secretAccessKey: process.env.ACCESS_SECRET,
accessKeyId: process.env.ACCESS_KEY,
region: process.env.REGION,
});
const BUCKET = process.env.BUCKET
const s3 = new aws.S3();
const upload = multer({
storage: multerS3({
s3: s3,
acl: "public-read",
bucket: BUCKET,
key: function (req, file, cb) {
console.log(file);
cb(null, file.originalname)
}
})
})
app.post('/uploadContractTos3', upload.single('file'), async function (req, res, next) {
res.send({s3fileurl : req.file.location})
// res.send("S3 uploaded")
})

Answer 1

使用renderToStream()方法从@react-pdf/renderer:

const pdfStream = await ReactPDF.renderToStream(<MyPdf />)
var uploadParams = {Bucket: '<bucket>', Key: '<fileName>', Body: pdfStream, ContentType: 'application/pdf'}
let uploadPromise = await s3.upload(uploadParams).promise()
console.log('Uploaded file URL', uploadPromise.Location)

第二种方法不是很理想，但是你可以把文档保存到一个文件夹，然后再上传到S3桶。

import ReactPDF from "@react-pdf/renderer";
ReactPDF.render(<MyDocument />, `${__dirname}/example.pdf`);

注意:我不确定React，但在NextJS中，不可能通过直接链接访问运行时动态生成的文件，但你可以参考文件路径。