当前位置:   article > 正文

uniapp手机端预览pdf_uni-app 本地加载pdf文件

uni-app 本地加载pdf文件

下载工具包:https://download.csdn.net/download/jbossjf/86765409

代码目录

 

  1. <template>
  2. <view>
  3. <view>
  4. <navigator @click="backMainPage()">
  5. <button type="primary">返回主页</button>
  6. </navigator>
  7. </view>
  8. <web-view style="margin-top: 110rpx;" :src="pdfUrl"></web-view>
  9. </view>
  10. </template>
  11. <script>
  12. export default {
  13. data() {
  14. return {
  15. pdfUrl:'',
  16. from:''
  17. }
  18. },
  19. onLoad(option) {
  20. /**
  21. * 浏览情景
  22. */
  23. // 浏览情景1:浏览本地的pdf文件
  24. // this.pdfUrl = '/hybrid/html/web/viewer.html?file=./compressed.tracemonkey-pldi-09.pdf'
  25. let newurl = encodeURI(option.url)
  26. // 浏览情景2:浏览在线的pdf文件
  27. this.pdfUrl = '/hybrid/html/web/viewer.html?file='+encodeURIComponent(newurl)
  28. },
  29. methods: {
  30. backMainPage()
  31. {
  32. uni.redirectTo({
  33. url: '/pages/bottom-nav/index',
  34. success() {
  35. }
  36. })
  37. }
  38. /**
  39. * 下载情景
  40. */
  41. // downloadPdfClick(){
  42. // // 下载情景1:h5内嵌app,通过分享给朋友的方式进行下载
  43. // if(this.from == 'app'){
  44. // let item = 'http://自己的域名/hybrid/html/web/pdf.html?shareUrl='+encodeURIComponent(this.bgUrl)
  45. // +'&shareTitle=PDF文件';
  46. // window.open(item);
  47. // return;
  48. // }else if(this.from == 'wx wq'){
  49. // // 下载情景2:h5内嵌微信小程序,从h5页面跳转到小程序页面后,然后通过调用小程序原生API进行下载
  50. // // 注意: 先要引入微信jssdk [命令: npm install jweixin-module]
  51. // // this.$wx.miniProgram.navigateTo({
  52. // // url: '/pages/pdf/pdf_download?pdf='+ encodeURIComponent(this.bgUrl) //小程序页面链接
  53. // // });
  54. // }
  55. // }
  56. }
  57. }
  58. </script>
  59. <style>
  60. </style>

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/煮酒与君饮/article/detail/883769
推荐阅读
相关标签
  

闽ICP备14008679号