pdf preview sebelum upload

Mau tanya untuk membaca semua file pdf sebelum upload. soalnya saya buat hanya baca 1 halaman

upload preview.PNG

di bawah ini codenya

<script>
    // Loaded via <script> tag, create shortcut to access PDF.js exports.
    var pdfjsLib = window['pdfjs-dist/build/pdf']
    // The workerSrc property shall be specified.
    pdfjsLib.GlobalWorkerOptions.workerSrc =
      'https://mozilla.github.io/pdf.js/build/pdf.worker.js'

    $('#myPdf').on('change', function (e) {
      var file = e.target.files[0]

      if (file.type == 'application/pdf') {
        var fileReader = new FileReader()
        fileReader.onload = function () {
          var pdfData = new Uint8Array(this.result)
          // Using DocumentInitParameters object to load binary data.
          var loadingTask = pdfjsLib.getDocument({ data: pdfData })
          loadingTask.promise.then(
            function (pdf) {
              console.log('PDF loaded')

              // Fetch the first page
              var pageNumber = 1
              pdf.getPage(pageNumber).then(function (page) {
                console.log('Page loaded')

                var scale = 1.5
                var viewport = page.getViewport({ scale: scale })

                // Prepare canvas using PDF page dimensions
                var canvas = $('#pdfViewer')[0]
                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,
                }
                var renderTask = page.render(renderContext)
                renderTask.promise.then(function () {
                  console.log('Page rendered')
                })
              })
            },
            function (reason) {
              // PDF loading error
              console.error(reason)
            },
          )
        }
        fileReader.readAsArrayBuffer(file)
      }
    })
  </script>
avatar ikhwansr
@ikhwansr

68 Kontribusi 3 Poin

Diperbarui 3 tahun yang lalu

1 Jawaban:

<div>Saya belum pernah mencobanya kalo untuk preview file pdf ketika akan upload.<br>Silahkan coba cara ini, mungkin bisa membantu&nbsp;<a href="https://stackoverflow.com/a/21017833/8005313">https://stackoverflow.com/a/21017833/8005313</a></div>

avatar ahanafi
@ahanafi

815 Kontribusi 552 Poin

Dipost 3 tahun yang lalu

Login untuk ikut Jawaban