【uniapp】uniapp开发app项目实现在线预览pdf文件

这篇具有很好参考价值的文章主要介绍了【uniapp】uniapp开发app项目实现在线预览pdf文件。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

最终效果:
【uniapp】uniapp开发app项目实现在线预览pdf文件

1.需要先从网上下载一份pdf.js的文件
地址:http://mozilla.github.io/pdf.js/getting_started/
【uniapp】uniapp开发app项目实现在线预览pdf文件

2.可以在uniapp项目中和pages目录平级新建一个hybrid文件夹,把下载好的pdf.js文件全部放到里面,主要是利用了web文件夹下的viewer.html文件
【uniapp】uniapp开发app项目实现在线预览pdf文件
【uniapp】uniapp开发app项目实现在线预览pdf文件
【uniapp】uniapp开发app项目实现在线预览pdf文件

3.要实现pdf预览,需要用到uniapp的一个api:web-view,因此需要新建一个.vue文件,该文件就写到pages目录下任意位置即可,写上如下代码:

<template>
  <view style="width: 100%; height: 90vh;">
    <view class="">
      <web-view :src="allUrl"></web-view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        allUrl: '',
        viewerUrl: '/hybrid/html/web/viewer.html', // 就是我们web目录下的viewer.html文件路径,注意路径不要错了
      }
    },
    onLoad(params) {
      // encodeURIComponent 函数可把字符串作为 URI 组件进行编码。decodeURIComponent解码
      // 这里的 params.fileUrl 是另一个组件进入到该组件时通过 navigateTo 传进来的pdf文件路径
      let fileUrl = encodeURIComponent(decodeURIComponent(params.fileUrl));
      // 下面的路径合起来其实是:'/hybrid/html/web/viewer.html?file=' + 线上pdf路径
      this.allUrl = this.viewerUrl + '?file=' + fileUrl
    }
  }
</script>

4.该文件就是上面步骤说的,跳转时携带了pdf文件路径的文件:

seeVideo(item) {
    if (item.subjectType === '文件') {
      // pdf文件预览
      // item.videos 是线上的pdf文件路径,这里的线上pdf路径,是用的阿里云服务器地址+pdf文件名
      // '&type=' + this.trainType 是路径跳转时携带多参数的写法,在pdfview组件中的onLoad函数中通过参数能取到fileUrl和type
      uni.navigateTo({
         url: "/pages/videoExercises/pdfview?fileUrl=" + encodeURIComponent(item.videos) + '&type=' + this.trainType
      })
    } else {
      // ......
    }
}

**注意事项:**以上步骤完成后,需要在web/viewer.js文件中,搜索一下not match,注释掉,否则在真机上无法成功预览pdf文件,如下代码:
【uniapp】uniapp开发app项目实现在线预览pdf文件
然后在真机上调试就可以成功预览pdf文件了
说明,如果在浏览器上模拟app项目,会出现跨域的报错提示,这个是正常的,不用理会文章来源地址https://www.toymoban.com/news/detail-400031.html

到了这里,关于【uniapp】uniapp开发app项目实现在线预览pdf文件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 文档在线预览(二)word、pdf文件转html以实现文档在线预览

    @ 目录 一、前言 1、aspose 2 、poi + pdfbox 3 spire 二、将文件转换成html字符串 1、将word文件转成html字符串 1.1 使用aspose 1.2 使用poi 1.3 使用spire 2、将pdf文件转成html字符串 2.1 使用aspose 2.2 使用 poi + pbfbox 2.3 使用spire 3、将excel文件转成html字符串 3.1 使用aspose 3.2 使用poi + pdfbox 3.3 使用

    2024年02月06日
    浏览(140)
  • Vue中使用pdf.js实现在线预览pdf文件流

    以下是在Vue中使用pdf.js实现在线预览pdf文件流的步骤: 在需要使用的组件中,使用以下代码引入pdf.js: 使用pdf.js的 getDocument() 方法加载pdf文件流。可以将文件流作为Blob对象传递给该方法。例如,可以使用axios从服务器获取pdf文件流: 在 loadPdf() 方法中,使用 getDocument() 方法

    2024年02月09日
    浏览(66)
  • 【Vue实用功能】Vue实现文档在线预览功能,在线预览PDF、Word、Excel、ppt等office文件

    Luckysheet 是一个类似于 excel 的在线电子表格,功能强大、配置简单且完全开源。 安装 Luckysheet 1、通过CDN引入依赖 由于 Luckysheet 现在还没有发布出模块化的开发,不能使用 npm,所以我们需要在 VUE 项目中手动引入相关文件。编辑 public/index.html 文件,在里面添加如下代码 2、指

    2023年04月22日
    浏览(89)
  • uniapp使用H5实现预览pdf文件

    下载后把压缩包解压到自己的项目的static文件夹下的pdf文件下,如图 新建一个文件名为filePreview.vue 在下载文件事件 1.如果预览文件是乱码情况或者在pc上报ocale.properties的请求返回404 解决:就是pdfjs下载版本有问题,下载以前的老版本 2.如果出现跨域问题直接修改源代码在v

    2024年02月09日
    浏览(36)
  • nodejs实现解析chm文件列表,无需转换为PDF文件格式,在线预览chm文件以及目录,不依赖任何网页端插件

    特性: 1、支持任意深度的chm文件解析 2、解析后内容结构转换为tree数据呈现 3、点击树节点可以在html实时查看数据  4、不依赖任何浏览器端插件,兼容性较好

    2024年02月13日
    浏览(48)
  • 【Vue】vue2使用pdfjs预览pdf文件,在线预览方式一,pdfjs文件包打开新窗口预览pdf文件

    【Vue】vue2预览显示quill富文本内容,vue-quill-editor回显页面,v-html回显富文本内容 【Vue】vue2项目使用swiper轮播图2023年8月21日实战保姆级教程 【Vue】vue2使用pdfjs预览pdf文件,在线预览方式一,pdfjs文件包打开新窗口预览pdf文件 提示:这里可以添加本文要记录的大概内容: vue

    2024年02月07日
    浏览(47)
  • OpenSource - 文件在线预览模块(多格式转 PDF 文件)

    说明:本项目是将一些常见的技术做了整合,帮助那些需要在线预览文件或正在寻找 office 转 pdf 文件预览的同学。 2023新增说明: 《文档转换预览技术说明》:https://www.yuque.com/hcwdc/open/pos2lih1vi3248g9 已经将部分的教程进行了整合优化,放到了语雀的平台上,原先的老教程依然

    2024年01月23日
    浏览(42)
  • uniapp 在线预览各种格式文件(支持doc, xls, ppt, pdf, docx, xlsx, pptx格式) 适用于小程序 (解决了真机调试可以打开,发布体验版打不开的问题)(可设置文件名)

    代码: 参考官方文档: uni.saveFile(OBJECT) @savefile | uni-app官网 uni-app,uniCloud,serverless https://uniapp.dcloud.net.cn/api/file/file.html#opendocument tips: 问题一: 打不开         1. 文件地址须保证能正常打开(在浏览器中尝试是否能预览或正常下载)         2.注意文件名最好为数字字母(非中文) 问题

    2024年02月05日
    浏览(61)
  • 前端vue3实现本地及在线文件预览(含pdf/txt/mp3/mp4/docx/xlsx/pptx)

    (一)微软office免费预览( 推荐 ) 支持doc/docx/xls/xlsx/ppt/pptx等多种office文件格式的免费预览 (二)XDOC文档预览云服务  移动端和PC端无插件预览PDF、OFD、Word、WPS等多种格式文档 本地或内网预览需要借助插件实现,pdf、mp3、mp4等主要靠原生标签或浏览器自带功能,尽量减少

    2024年02月05日
    浏览(71)
  • vue项目用后端返回的文件流实现docx和pdf文件预览

    写这篇文章的目的,是因为我比较懒,想把代码记录一下,方便日后使用;哈哈,如果你也需要,也可以复制粘贴啊,为了方便自己和需要的人知道怎么使用,我尽量写的详细一点,没有什么技术难点,就是简单的记录,万一能帮到需要的人呢,也是一件美事; 其实也就是使

    2023年04月20日
    浏览(54)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包