/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

157 votes794 views6 answers
Create new react app
Javascript React
1 vote202 views1 answer
React-native-paper password input
Javascript React
0 vote209 views1 answer
React js Property 'Select' does not exist on type 'Form'.ts(2339) an
Javascript React
0 vote316 views1 answer
React big calendar messages
Javascript React
125 votes634 views6 answers
Install React Bootstrap
Javascript React
30 votes289 views5 answers
Use effect react
Javascript React
3 votes241 views2 answers
Discord.js react to message
Javascript React
1 vote248 views2 answers
Use state reactjs
Javascript React
0 vote204 views1 answer
React toastify does not have design
Javascript React
0 vote204 views3 answers
React counter animation
Javascript React