Breaking News: Grepper is joining You.com. Read the official announcement!

react open pdf in new tab

Crowded Copperhead answered on April 18, 2021 Popularity 9/10 Helpfulness 5/10

answer react open pdf in new tab

related react open pdf in new tab

react open pdf in new tab

Comment

<a href='/api/v1/print/example.pdf' target='_blank' rel='noopener noreferrer'>

Popularity 9/10 Helpfulness 5/10 Language javascript

Source: stackoverflow.com

Tags: javascript pdf

Link to this answer
Share Copy Link

Contributed on Apr 18 2021

Crowded Copperhead

0 Answers Avg Quality 2/10

Closely Related Answers

react open pdf in new tab

Comment

Server:________________________________________

const express = require('express')
const router = express.Router()

const puppeteer = require('puppeteer')

const generatePDF = async (html = '') => {
  const browser = await puppeteer.launch()
  const page = await browser.newPage()
  await page.setContent(html, { waitUntil: 'networkidle0' })
  const pdfBuffer = await page.pdf({ format: 'a4' })

  await page.close()
  await browser.close()

  return pdfBuffer
}

router.post('/', async (req, res) => {
  // console.log(req.body)
  const pdf = await generatePDF(req.body.html)
  // res.contentType('application/pdf')
  res.set({ 'Content-Type': 'application/pdf', 'Content-Length': pdf.length })
  res.send(pdf)
})

module.exports = router

Client:___________________________________________________

const GeneratePDF = () => {
const names = ['John', 'Alexander', ' Alex', 'Allan', 'Jacob']

  const renderRows = (names) => {
    return (
      <ul>
        {names.map((row, index) => {
          return (
            <li key={index}>
              <p>{row}</p>
            </li>
          )
        })}
      </ul>
    )
  }

  const pdfClickHandler = async () => {
    const html = ReactDOMServer.renderToStaticMarkup(renderRows(names))
    try {
      const response = await axios.post(
        '/api/services/pdf',
        { html },
        {
          responseType: 'arraybuffer',
          headers: {
            Accept: 'application/pdf',
          },
        }
      )

      const file = new Blob([response.data], { type: 'application/pdf' })

      const fileURL = URL.createObjectURL(file)

      const pdfWindow = window.open()

      pdfWindow.location.href = fileURL

    } catch (err) {
      console.log(err.messaes)
    }
  }

  return (  
      <Button variant='contained' onClick={pdfClickHandler}>
        Generate PDF
      </Button>
  )
}

export default GeneratePDF

Popularity 9/10 Helpfulness 2/10 Language javascript

Source: stackoverflow.com

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Oct 05 2021

Crowded Crocodile

0 Answers Avg Quality 2/10

react open pdf in new tab

Contents

More Related Answers

react open pdf in new tab

Closely Related Answers

react open pdf in new tab

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.