显示 pdf 文件并从 arraybuffer blob 下载 onclick

Question

I am creating pdf in nodejs backend and storing them in my DB as blobs.

In my frontend(React), I am calling the api and receiving whole list of blobs data and converting it into files as below. Then creating URLs from them and storing URLs as array and in state.

componentDidMount() {
    const fileURLs = [];
    fetch(`/api/invoices`)
      .then((res) => res.json())
      .then((invoices) => {
        this.setState({ invoices });
        invoices.map((inv) => {
          const file = new Blob([inv.file_content], {
            type: "application/pdf",
          });
          const fileURL = URL.createObjectURL(file);
          fileURLs.push(fileURL);
        });
        this.setState({ fileURLs });
      })
  }

Also the blob data I am receiving looks like this: blob data

Inside my render(), I linked the url to anchor tag to open it in new tab. Urls looks like this: blob:http://localhost:3000/1b5c4fe3-bb7c-4850-8804-d850f824b07f

this.state.invoices.map((p, i) => (
...
  <a
    href={this.state.fileURLs[i]}
    target="_blank"
    rel="noopener noreferrer"
  >
    {p.file_name}
  </a>
...
)

If I visit the url it just says Failed to load PDF document.

In my backend I am storing response.arrayBuffer() as my blob data. I am also saving pdf in local file system just to test and it creates the pdf files without any problem.

Edit: I am attaching some of my backend code as well.

.then(async data => {
  const response = await fetch(api, {
      method: "GET",
      headers: {
          "Accept": "application/octet-stream",
          "Authorization": "Bearer " + token
      },
      encoding: null
 });
const filename = response.headers.get('Content-Disposition')
    .split(';')
    .find(n => n.includes('filename='))
    .replace('filename=', '')
    .trim();
const invoice = await response.arrayBuffer();
return [filename, invoice];
})
.then(data => {
    const created = moment().format('YYYY-MM-DD HH:mm:ss');
    //save pdf file in local directory
    var base64Str = Buffer.from(data[1]).toString('base64');
    base64.base64Decode(base64Str, './frontend/src/invoices/' + data[0]);
    
// save pdf in database table
    const query = `call create_invoice_procedure('${data[0]}','${data[1]}','${created}')`;
    connection.query(query, (err, rows) => {
        if (err) {
            throw err;
        }
     });
  })

Invoices route to get all invoices:

router.get('/', (req, res) => {
    var query = `SELECT * from table`;
    connection.query(query, (error, results) => {
        if (error) {
            return error;
        }
        else {
            res.json(results);
        }
    })
});

So the problem for me is I am not able to view or download the pdf in frontend.

Answer 1

If you're sure that your blob is correct, try adding a click event on any element to open url instead of using href on anchor tag. This works for me:

const blob = new Blob([fileData], {
        type: 'application/pdf'
      });
      const fileURL = URL.createObjectURL(blob);
      window.open(fileURL, '_blank', 'location=yes,height=650,width=1000,scrollbars=yes,status=yes');