在uni-app中使用web-view进行PDF预览的方法分享

项目当中附件预览,相信大家都会遇到,下面分享一个 PDF 预览组件,可直接使用

  • 安装插件
npm install --save vue-pdf
<el-dialog
  title="附件预览"
  :visible.sync="previewPdf"
  width="60%"
  top="5vh"
  append-to-body
>
  <pdf ref="pdf" v-for="i in numPages" :key="i" :src="url" :page="i"> </pdf>
</el-dialog>
<script>
import pdf from 'vue-pdf'
export default {
  components:{
      pdf
  },
  data(){
      return {
          previewPdf: false,
          url: "http://192.168.2.222/test.pdf",
          numPages: null,
      }
  },
  methods: {
    getNumPages() {
      let loadingTask = pdf.createLoadingTask(this.url);
      loadingTask.promise
        .then((pdf) => {
          this.numPages = pdf.numPages;
        })
        .catch((err) => {
          console.error("pdf 加载失败", err);
        });
    },
  }
</script>
- - - - - 本页内容已结束,喜欢请分享 - - - - -

感谢您的来访,获取更多精彩文章请收藏本站。

© 版权声明
THE END
喜欢就支持一下吧
点赞12 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容