vue3移动端浏览pdf文件

背景

适配安卓和ios系统打开h5的链接，我采用pdfjs这个第三方库。地址：mozilla.github.io/pdf.js/gett…

代码

<!-- icons -->
<template>
  <div>
    <iframe id="previewPdf" class="prism-player" :src="fileUrl" width="100%" height="100%"></iframe>
  </div>
</template>

<script>
import { reportView } from "@/api/data";
import { api } from "@/config";
// api
const { base_api } = api;
export default {
  data() {
    return {
      fileUrl: ""
    };
  },

  computed: {},

  mounted() {
    if (this.$route.query.id) {
      if (this.$route.query.title) {
        document.title = this.$route.query.title;
      }
      // 这儿的url， 就是通过 axios 进行请求的地址，只不过换成了从导航url进行请求的方式
      let url = base_api + "/Report/view.pdf?id=" + this.$route.query.id;
      this.fileUrl = `${
        process.env.NODE_ENV == "development" ? "" : "/app"
      }/static/pdfjs/web/viewer.html?file=${encodeURIComponent(url)}`;
    }
  },

  methods: {}
};
</script>
<style lang='scss' scoped>
.prism-player {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
</style>