sweetalert2 / sweetalert2.github.io

Documentation for SweetAlert2
https://sweetalert2.github.io
40 stars 18 forks source link

Add pdf viewer example with fullscreen support #126

Open limonte opened 4 years ago

limonte commented 4 years ago

https://mozilla.github.io/pdf.js/

https://github.com/sweetalert2/sweetalert2/issues/1781

limonte commented 6 days ago
      pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://mozilla.github.io/pdf.js/build/pdf.worker.mjs'

      // SweetAlert2 popup
      Swal.fire({
        title: 'PDF Preview',
        html: '<canvas id="pdfCanvas"></canvas>',
        width: 'auto',
        didOpen: async () => {
          const pdfUrl = 'https://pdfobject.com/pdf/sample.pdf'
          const loadingTask = pdfjsLib.getDocument(pdfUrl)
          const pdf = await loadingTask.promise
          // Fetch the first page
          pdf.getPage(1).then(function (page) {
            var viewport = page.getViewport({ scale: 1.5 })

            // Prepare canvas using PDF page dimensions
            var canvas = document.getElementById('pdfCanvas')
            var context = canvas.getContext('2d')
            canvas.height = viewport.height
            canvas.width = viewport.width

            // Render PDF page into canvas context
            var renderContext = {
              canvasContext: context,
              viewport: viewport,
            }
            page.render(renderContext)
          })
        },
      })