vue 在线看PDF(PC端和移动端)

一、PC端：直接用iframe，让后台返回文件流就可以看到了

<template>
  <div>
    <!-- PDF -->
    <iframe :src="url" width="100%" height="900px"></iframe>
  </div>
</template>

<script>
export default {
  data() {
    return {
      VUE_APP_BASE_API: process.env.VUE_APP_BASE_API,
      trackId: this.$store.state.user.token
    }
  },
  computed: {
    url() { // 文件流地址
      return (
        this.VUE_APP_BASE_API +
        '/tjks/viewPDF?trackId=' +
        this.trackId +
        '&tjjhid=' +
        this.$route.query.tjjhid +
        '&xxid=' +
        this.$route.query.xxid +
        '&ksid=' +
        this.$route.query.ksid
      )
    }
  }
}
</script>

二、移动端：因为移动端有IOS和安卓，如果用iframe的话，安卓机只能下载，IOS可以正常看，因此，在移动端使用vue-pdf

1. 安装vue-pdf  npm install --save vue-pdf

2. 一定要引入CMapReaderFactory ，不然中文是不会显示的

<template>
  <div>
    <!-- PDF -->
    <pdf :src="pdfUrl"></pdf>
  </div>
</template>

<script>
import pdf from 'vue-pdf'
import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory'
export default {
  components: {
    pdf
  },
  data() {
    return {
      VUE_APP_BASE_API: process.env.VUE_APP_BASE_API,
      trackId: this.$store.state.app.user.token,
      pdfUrl: ''
    }
  },
  computed: {
    url() {
      return (
        this.VUE_APP_BASE_API +
        '/wechat/viewWechatPDF?trackId=' +
        this.$route.query.trackId +
        '&tjjhid=' +
        this.$route.query.tjjhid +
        '&xxid=' +
        this.$route.query.xxid +
        '&ksid=' +
        this.$route.query.ksid
      )
    }
  },
  mounted() {
    this.pdfUrl = pdf.createLoadingTask({ url: this.url, CMapReaderFactory })
  }
}
</script>