/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 vote198 views1 answer
React native layout animation android
Javascript React
0 vote224 views1 answer
Create loop to specific length react
Javascript React
-1 vote204 views1 answer
Flatlist react native horizontal
Javascript React
-2 votes217 views2 answers
React native margin
Javascript React
0 vote214 views1 answer
Style react native alert text
Javascript React
1 vote200 views1 answer
Typing refs react
Javascript React
0 vote219 views1 answer
Orderbychild firebase react
Javascript React
4 votes206 views1 answer
React router external link
Javascript React
3 votes200 views1 answer
React get method
Javascript React
6 votes292 views3 answers
Multiple path names for a same component in react router
Javascript React