uin-app项目实现pdf文件预览以及下载

news2024/11/16 23:32:52

由于项目需要，需要对于pdf格式的文件进行预览由用户进行选择性下载，查阅相关文档后方知针对于这种 pdf.js有奇效

一、下载

官网地址https://mozilla.github.io/pdf.js/getting_started/#download
在这里插入图片描述

文档下载解压成功后，按照这种格式放入uin-app项目中：

注意：

需要注意的是，解压后的文件需要放在静态资源文件夹中，pdf.js的相关文件是需要按照静态资源来做加载的，放在别的地方加载不出来的，
同时build文件我是修改了文件名称，以及源码中的相关名称的，在上传远程的时候这个文件总是被忽略掉，如果没有类似问题，可以不做修改

二、应用

新建单独页面做为点击链接后的，pdf文件渲染页面
通过web-view结合pdf.js对于pdf文件做出预览

<template>
  <view class="pdf-module" style="width: 100%; height: 100%">
    <web-view :src="allUrl"></web-view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      allUrl: "",
      pdfUrl: "",
      viewerUrl: "/static/hybrid/html/web/viewer.html",
    };
  },
  onLoad(option) {
    let itemObj = JSON.parse(decodeURIComponent(option.itemObj));
    this.allUrl = `${this.viewerUrl}?file=${itemObj.url}`;
  },
};
</script>

注意：
在这里插入图片描述