Skip to content

Auto Download Issue #144

@vinaycotgin

Description

@vinaycotgin

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;

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions