web/apps/mobile/src/views/common/pdfViewExample.vue

<template>
  <div class="pdf-view-example j-contanter">
    <div class="pdf-container j-main">
      <object :data="pdfUrl" type="application/pdf" width="100%" height="100%">
        <p>PDF 无法显示，请下载查看：<a :href="pdfUrl">下载 PDF</a></p>
      </object>
    </div>
    <div v-if="!getUserId" class="j-footer">
      <a href="/jyapp/free/login?back=index&to=back&activity=bidCreditReportPreview" class="adsense-container">
        <AdSingle
          ad="app-credit-report-sample"
          :show-tag="false"
          :show-close-icon="false"
          class="adsense-container"
        />
      </a>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import AdSingle from '@/components/ad/Ad'
import { getAssetsFile } from '@/utils'

export default {
  name: 'PdfViewExample',
  components: {
    AdSingle
  },
  data() {
    return {
      pdfUrl: ''
    }
  },
  computed: {
    ...mapGetters('user', ['getUserId'])
  },
  created() {
    const { pdfUrl } = this.$route.query
    if (pdfUrl) {
      this.pdfUrl = decodeURIComponent(pdfUrl)
    }
    else {
      const pdf = getAssetsFile('example.pdf')
      this.pdfUrl = pdf
    }
  }
}
</script>

<style lang="scss" scoped>
.pdf-container {
  width: 100%;
  height: 100%;
  iframe {
    width: 100%;
    height: 100%;
  }
}
</style>