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

项目比较忙，等有时间再看看吧…