[VUE.JS] API에서 받은 PDF파일 VUE에서 확인(PDF 뷰어)

API에서 받은 PDF 파일을 Vue.js 응용 프로그램에 표시하는 방법의 예입니다.

1. Axios 라이브러리를 사용하여 API에서 PDF 파일 취득.

import axios from 'axios'

export default {
  data() {
    return {
      pdfSrc: null
    }
  },
  mounted() {
    axios.get('https://your-api-endpoint.com/pdf-file', {
      responseType: 'arraybuffer'
    })
    .then(response => {
      this.pdfSrc = new Uint8Array(response.data)
    })
    .catch(error => {
      console.error(error)
    })
  }
}

 

2. Vue.js 환경에 "vue-pdf" 라이브러리를 설치합니다.

npm install vue-pdf

 

3. Vue 구성 요소에서 "vue-pdf" 구성 요소를 가져옵니다.

import Pdf from 'vue-pdf'

export default {
  components: {
    Pdf
  },
  data() {
    return {
      pdfSrc: null
    }
  },
  mounted() {
    axios.get('https://your-api-endpoint.com/pdf-file', {
      responseType: 'arraybuffer'
    })
    .then(response => {
      this.pdfSrc = new Uint8Array(response.data)
    })
    .catch(error => {
      console.error(error)
    })
  }
}

 

4. PDF 파일을 표시하려면 템플릿의 "vue-pdf" 구성 요소를 사용하십시오.

<template>
  <pdf :src="pdfSrc" />
</template>