vue項目中使用加載使用pdf

最近項目開發需要用到pdf預覽功能，看了很多資料，大緻的方法應該是兩三種

第一種iframe的方法：

<template>
  <div style="height: 75vh;">
    <iframe
      :src="pdfObj.src"
      frameborder="0"
      style="height: 75vh;overflow-y: auto;overflow-x: hidden;width: 100%;"
    ></iframe>
  </div>
</template>

<script>
export default {
  name: 'Fpdf',
  components: {},
  props: {
  	// 傳遞的父元件pdf資訊
    pdfObj: {
      type: Object,
      required: false,
      default: () => ({})
    }
  },
  data () {
    return {}
  },
  computed: {},
  created () {},
  methods: {}
}
</script>

<style lang="scss" scoped></style>
           

第二種比較常見的，使用vue-pdf：

1.安裝vue-pdf插件

2.在需要使用的頁面引入

3.html中使用

4.直接使用線上連結的話會出現跨域問題（在标簽内指派會，會直接請求伺服器檔案路徑位址，伺服器檔案路徑會暴露，出于安全考慮，改為通過調用普通接口，傳回檔案流的，再進行解析才可實作）

• 一種是後端傳回檔案流，前端做轉化

// 資料必須是二進制時間的blob對象
    getBlobPDF (blob) {
      let url = null
      if (window.createObjectURL !== undefined) {
        // basic
        url = window.createObjectURL(blob)
      } else if (window.webkitURL !== undefined) {
        // webkit or chrome
        try {
          url = window.webkitURL.createObjectURL(blob)
        } catch (error) {}
      } else if (window.URL !== undefined) {
        // mozilla(firefox)
        try {
          url = window.URL.createObjectURL(blob)
        } catch (error) {}
      }
      return url
    }
           

• 另一種是pdf底層提供的pdf.createLoadingTask()方法，此方法可以傳一個對象作為參賽，對象内可以添加url（就是上面說的跨域請求的url），和headers資訊等

<template>
  <div style="height: 75vh;">
  // 這上面還有幾個方法和屬性，比如說
  // :page // 目前pdf頁面
  // @num-pages // pdf總頁碼
  // page-loaded // 初始化pdf頁面
  // loaded // 加載事件
	<pdf ref="pdf" :src="src"></pdf>
  </div>
</template>

<script>
import pdf from 'vue-pdf'
const headers = {
  Authorization: 'Bearer SOME_TOKEN',
  'x-ipp-device-uuid': 'SOME_UUID',
  'x-ipp-client': 'SOME_ID',
  'x-ipp-client-version': 'SOME_VERSION'
}
let loadingTask = pdf.createLoadingTask({
  url: 'https://xxxxxx.pdf',
  httpHeaders: headers
})
export default {
  name: 'Fpdf',
  components: { pdf },
  props: {},
  data () {
    return {
      src: ''
    }
  },
  computed: {},
  created () {
  	// 将loadingtask指派給需要src
  	this.src = loadingTask 
  },
  methods: {
  	// 翻頁之類的事件方法寫上即可...
  }
}
</script>
export default {

<style lang="scss" scoped></style>
           

第三種還沒有嘗試，應該叫pdfjs-dist

項目比較忙，等有時間再看看吧…