二进制流实现pdf预览

<template>
  <div v-loading="loading" style="height: 100%">
    <iframe
      :src="url"
      width="100%"
      height="100%"
      frameborder="0"
    />

  </div>
</template>

<script>
export default {
  data: vm => ({
    loading: false,
    documentId: vm.$route.query.documentId,
    url: ''
  }),
  created () {
    this.previewDocument();
    // 防止出现两个滚动条（body和iframe)
    const body = document.getElementsByTagName('body')[0];
    body.style.overflow = 'hidden';
    // iframe 占满整个页面
    const app = document.getElementById('app');
    app.style.height = '100%';
  },
  methods: {
    previewDocument () {
      this.loading = true;
      this.$http({
        url: '/rssapi/RentCollection/DownloadDocument',
        params: { documentIds: this.documentId },
        responseType: 'arraybuffer'
      })
        .then(res => {
          const blob = new Blob([res], {
            type: 'application/pdf'
          });
          this.url = window.URL.createObjectURL(blob);
        })
        .catch(e => {
          this.$message.error(`${e.code}: ${e.message}`);
        })
        .finally(() => {
          this.loading = false;
        });
    }
  }
};
</script>