Pdf Embed Api

PdfViewer.vue

<template>
  <div>
    <div ref="pdfContainer" style="height: 800px"></div>
    <button
      @click="
        renderPdf(
          'https://documentcloud.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf',
          'test.pdf'
        )
      "
    >
      Load Pdf
    </button>
  </div>
</template>

<script>
export default {
  mounted() {
    document.addEventListener('adobe_dc_view_sdk.ready', () => {
      this.adobeApiReady = true
    })
  },
  data() {
    return {
      adobeApiReady: false,
      previewFilePromise: null
    }
  },
  methods: {
    nextPage() {
      this.previewFilePromise.then(adobeViewer => {
        adobeViewer.getAPIs().then(apis => {
          apis.getCurrentPage()
            .then(currentPage => apis.gotoLocation(currentPage + 1))
            .catch(error => console.error(error))
        })
      })
    },
    previousPage() {
      this.previewFilePromise.then(adobeViewer => {
        adobeViewer.getAPIs().then(apis => {
          apis.getCurrentPage()
            .then(currentPage => {
              if (currentPage > 1) {
                return apis.gotoLocation(currentPage - 1)
              }
            })
            .catch(error => console.error(error))
        })
      })
    },
    zoomIn() {
      this.previewFilePromise.then(adobeViewer => {
        adobeViewer.getAPIs().then(apis => {
          apis.getZoomAPIs().zoomIn()
            .catch(error => console.error(error))
        })
      })
    },
    zoomOut() {
      this.previewFilePromise.then(adobeViewer => {
        adobeViewer.getAPIs().then(apis => {
          apis.getZoomAPIs().zoomOut()
            .catch(error => console.error(error))
        })
      })
    },
    renderPdf(url, fileName) {
      if (!this.adobeApiReady) {
        return
      }

      const previewConfig = {
        defaultViewMode: 'FIT_WIDTH',
        showAnnotationTools: false
      }

      this.$refs.pdfContainer.innerHTML = ""

      let viewer = document.createElement("div")
      viewer.id = "viewer"

      this.$refs.pdfContainer.appendChild(viewer)

      let adobeDCView = new AdobeDC.View({
        clientId: "API_KEY",
        divId: "viewer"
      })

      this.previewFilePromise = adobeDCView.previewFile({
        content: {
          location: {
            url: url,
          }
        },
        metaData: {
          fileName: fileName,
          id: fileName
        },
      }, previewConfig)
    }
  }
}
</script>

Great job @AlexandruMiricioiu!

Future people who land here, if you're pre-loading Adobe's script, you might need to do something like this incase you miss the event:

...
    watch: {
        adobeApiReady: {
            handler () {
                this.renderPdf()
            }
        }
    },
    mounted () {
        if (window.AdobeDC) {
            this.adobeApiReady = true
        } else {
            document.addEventListener('adobe_dc_view_sdk.ready', () => {
                this.adobeApiReady = true
            })
        }

    }
...