/Javascript/React/React open pdf in new tab

React open pdf in new tab

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

Source: stackoverflow.com

React open pdf in new tab

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

Source: stackoverflow.com

Similar codes

0 vote362 views1 answer
Start withnreact
Javascript React
0 vote347 views1 answer
Make a component update every second react
Javascript React
-1 vote319 views4 answers
React native reset cache
Javascript React
0 vote332 views3 answers
Unexpected template string expression no-template-curly-in-string react
Javascript React
0 vote331 views2 answers
React router dom link same page with different param
Javascript React
0 vote351 views2 answers
Reactjs firebase timestamp to date
Javascript React
0 vote320 views1 answer
Textfield label language react
Javascript React
-1 vote328 views2 answers
What is a react hook
Javascript React
0 vote391 views1 answer
Scroll down react js typescript
Javascript React
0 vote379 views2 answers
How to spot Error: Maximum update depth exceeded. in react
Javascript React