h5浏览pdf文件

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

将hybrid整个复制到一级文件夹下
hybrid地址:https://download.csdn.net/download/qq_37194189/88157330

创建一个 pdf页面用于展示pdf文件

<template>
    <view style="width: 100%;" >
        <web-view  :src="pdfUrl"></web-view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
            pdfUrl:'',
            htmlUrl: '/hybrid/html/web/viewer.html', 
           }
        },
        onLoad(options) {
        //从A页面点击跳转传递pdf文件路径过来
                let fileUrl = encodeURIComponent(options.pdfUrl) // encodeURIComponent 函数可把字符串作为 URI 组件进行编码。
                this.pdfUrl= this.htmlUrl+ '?file=' + fileUrl
          }
    }
</script>

在要跳转的文件里加方法
 

//pdf,传入pdf的url 可实现在线预览
showPdf(){
	let pdfUrl= encodeURIComponent('http://rtdsoft.xxx.pdf')
	uni.navigateTo({
	    url:'/pages/openpdf/openpdf?pdfUrl='+ pdfUrl
	})
},

就OK啦
 文章来源地址https://www.toymoban.com/news/detail-635290.html

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

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

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

相关文章

  • JS-27 前端数据请求方式;HTTP协议的解析;JavaScript XHR、Fetch的数据请求与响应函数;前端文件上传XHR、Fetch;安装浏览器插件FeHelper

    早期的网页都是通过后端渲染来完成的,即服务器端渲染(SSR,server side render): 客户端发出请求 - 服务端接收请求并返回相应HTML文档 - 页面刷新,客户端加载新的HTML文档; 服务器端渲染的缺点: 当用户点击页面中的某个按钮向服务器发送请求时,页面本质上只是一些数

    2024年02月16日
    浏览(48)
  • uniapp h5文件流下载pdf文件

    今天遇到一个需求就是后端返回一个文件流,前端需要用户点击以后下载,那么怎么去做呢 请看下面代码

    2024年04月25日
    浏览(28)
  • uniapp H5预览PDF文件

    1,下载资源后hybrid文件存放在static静态文件里 (点击这里去下载文件)  2,pdf预览页面配置   3,跳转pdf页面方法,传参 按照上面的做就可以了

    2024年02月17日
    浏览(34)
  • uniapp使用H5实现预览pdf文件

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

    2024年02月09日
    浏览(28)
  • H5查看pdf文件(pdfh5)

    我用的是 pdfh5 来查看的H5中的pdf文件 -- 使用 pdfh5 插件来打开 pdf文件 -- 下面是两种使用方法,方法一、二都可以(但是我在使用方法二时有卡顿现象,可能是因为未开启懒加载) -- 方法二中的 on 可以打印出来错误信息  使用方法          1、引入 pdfh5         2、在 vue 文

    2024年02月11日
    浏览(22)
  • 微信浏览器H5下载文件

    微信浏览器无法下载文件,我们可以跳转外部浏览器进行下载。 首先绑定按钮事件(我这里用的uniapp开发) button class=“btn” @click=“downFile”点击下载 然后判断当前页面是否是微信浏览器,若是,提示用户打开右上角选择浏览器打开链接,若不是,进行下载 进入默认浏览器

    2024年02月16日
    浏览(56)
  • 微信H5下载文件、微信浏览器无法下载文件解决方案

    手机端的微信访问网页的时候,是禁止直接下载文件的 但是IOS端可以预览.txt/.doc/.docx/.xls/xlsx/.pdf等格式的文件,Android端在下载这些格式的文件时,可以唤起 ‘即将离开微信,在浏览器打开’ 提示 所以,根据手机微信的这些限制,考虑在下载文件时,使Android微信在下载任何

    2024年02月16日
    浏览(68)
  • Vue3前端h5移动端页面预览PDF使用pdfjs-dist,添加自定义文本水印

    pnpm i pdfjs-dist@2.5.207

    2024年01月18日
    浏览(61)
  • 微信小程序----微信小程序浏览pdf文件

    说明:通过wx.downloadFile,wx.openDocumen来实现打开pdf文件。只需在js操作即可。

    2024年02月11日
    浏览(29)
  • 在浏览器中使用javascript打印HTML中指定Div带背景图片内容生成PDF电子证书查询的解决方案

    要调用浏览器中的打印功能,并指定需要打印的内容为特定的DIV内的内容,你可以使用JavaScript来实现。下面是一种实现方法: 首先,在需要打印的DIV标签上添加一个唯一的ID属性,例如: 接下来,在JavaScript中使用 window.print() 方法来调用浏览器的打印功能,并指定打印的内容

    2024年02月13日
    浏览(51)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包