-
Notifications
You must be signed in to change notification settings - Fork 68
Description
When my PDF is generated, it automatically downloads. I don't want it to auto-download. Instead, I want it to upload to an API once it's generated.
Below is my code for reference:
import React, { useRef } from "react";
import generatePDF, { Resolution, Margin } from "react-to-pdf";
import Temp from "./Temp";
const App = () => {
const pdfBoxRef = useRef();
const options = {
method: "save",
filename: "advanced-example.pdf",
resolution: Resolution.HIGH,
page: {
margin: Margin.SMALL,
format: "letter",
},
canvas: {
qualityRatio: 1,
},
overrides: {
pdf: {
compress: true,
},
canvas: {
useCORS: true,
},
},
};
// Upload function for PDF Blob
const uploadPDF = async (pdfBlob) => {
const formData = new FormData();
formData.append("pdf", pdfBlob, "generated.pdf");
try {
const response = await fetch("https://your-api.com/upload", {
method: "POST",
body: formData,
});
if (response.ok) {
console.log("PDF uploaded successfully");
// Get the download URL from the response
const { downloadUrl } = await response.json();
// Trigger download after successful upload
const downloadLink = document.createElement("a");
downloadLink.href = downloadUrl;
downloadLink.download = "salary_slip.pdf";
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
} else {
console.error("PDF upload failed");
}
} catch (error) {
console.error("Error uploading PDF:", error);
}
};
const handleGenerateAndUploadPDF = () => {
// Use react-to-pdf to generate the PDF
generatePDF(pdfBoxRef, options)
.then((pdfDataUrl) => {
// Convert data URL to Blob
fetch(pdfDataUrl)
.then((res) => res.blob())
.then((pdfBlob) => {
// Upload the PDF Blob
uploadPDF(pdfBlob);
})
.catch((error) => console.error("Error converting to Blob:", error));
})
.catch((error) => console.error("Error generating PDF:", error));
};
return (
Generate & Upload PDF
);
};
export default App;