pdfPreview.vue 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142
  1. <template>
  2. <view class="content"><web-view :src="url"></web-view></view>
  3. </template>
  4. <script>
  5. export default {
  6. data() {
  7. return {
  8. // pdf.js的viewer.htm所在路径
  9. // 注意:静态的html文件需要放在根路径下的 hybrid/html 文件夹中
  10. viewerUrl: '/static/hybrid/html/web/viewer.html',
  11. // 要访问的pdf的路径
  12. fileUrl: 'https://yuleifanhua.oss-cn-shanghai.aliyuncs.com/MES%E5%8F%8AWMS%E4%BA%91%E5%B9%B3%E5%8F%B0%E5%90%88%E5%90%8C.pdf',
  13. // 最终显示在web-view中的路径
  14. url: ''
  15. };
  16. },
  17. onLoad(options) {
  18. // h5,使用h5访问的时候记得跨域
  19. // #ifdef H5
  20. this.url = `${this.viewerUrl}?file=${encodeURIComponent(options.url)}`;
  21. // #endif
  22. // 在安卓和ios手机上
  23. // 判断是手机系统:安卓,使用pdf.js
  24. // #ifdef APP-PLUS
  25. if(plus.os.name === 'Android') {
  26. this.url = `${this.viewerUrl}?file=${encodeURIComponent(options.url)}`;
  27. }
  28. // ios,直接访问pdf所在路径
  29. else {
  30. this.url = encodeURIComponent(options.url);
  31. }
  32. // #endif
  33. },
  34. methods: {}
  35. };
  36. </script>
  37. <style>
  38. </style>