/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 vote349 views1 answer
How to make this transform with React-Native? https://stackoverflow.com/questions/37538303/how-to-make-this-transform-with-react-native
Javascript React
26 votes374 views5 answers
React font-awesome
Javascript React
4 votes401 views1 answer
React native radio buttons
Javascript React
17 votes423 views5 answers
How to run react native app
Javascript React
0 vote434 views2 answers
React native use route params
Javascript React
0 vote391 views1 answer
Background image in react from variable
Javascript React
0 vote379 views1 answer
React native webview disable touch
Javascript React
30 votes353 views6 answers
React if statement
Javascript React
1 vote367 views1 answer
Reactjs .htaccess
Javascript React
0 vote379 views1 answer
React hook form reset only one field
Javascript React