/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 vote294 views1 answer
Remove stack header bottom line react native
Javascript React
0 vote288 views3 answers
React form validation
Javascript React
0 vote307 views1 answer
React native scrollview in modal
Javascript React
64 votes323 views7 answers
React router
Javascript React
20 votes310 views4 answers
On enter key press react
Javascript React
0 vote295 views1 answer
React js error stackoverflaw
Javascript React
-1 vote299 views1 answer
Animation react native npm
Javascript React
0 vote264 views1 answer
React open url with button
Javascript React
0 vote281 views2 answers
Airbnb react native eslint
Javascript React
0 vote283 views2 answers
Read and save excel with react
Javascript React