关于如何在移动端正确的显示Pdf文件

1. 下载需要的依赖

npm install vue-pdf 或 yarn install vue-pdf

2. 引入组件

import pdf from 'vue-pdf'; // 引入pdf组件

3. 注册组件

// 注册pdf组件
components: {
  pdf
},
data() {
  return {
    pdfUrl: '',
  }
},
methods: {
  getPdfInfo() {
    this.$http.get('/sys/user/pdf/info')
    .then(({ data: res }) => {
      if (res.code !== 1) return this.$toast(res.msg);
      // 解决pdf文字缺失或乱码的问题
      let CMAP_URL = "https://unpkg.com/pdfjs-dist@2.0.943/cmaps/";
      this.pdfUrl = pdf.createLoadingTask({
        url: res.data.invoicePdf, // pdf地址
        cMapUrl: CMAP_URL,
        cMapPacked: true,
      });
    }).catch((err) => {})
  }
}

4. 模板中使用

<template>
  <pdf :src="pdfUrl"></pdf>
</template>

注：这只是简单的展示pdf文件，如果需要完成其他业务可以查看官方文档说明
官方地址：https://github.com/FranckFreiburger/vue-pdf