H5查看pdf文件(pdfh5)

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

我用的是 pdfh5 来查看的H5中的pdf文件

-- 使用 pdfh5 插件来打开 pdf文件

-- 下面是两种使用方法,方法一、二都可以(但是我在使用方法二时有卡顿现象,可能是因为未开启懒加载)

-- 方法二中的 on 可以打印出来错误信息

 使用方法 

        1、引入 pdfh5

npm install pdfh5

        2、在 vue 文件中使用以下代码(这里创建了一个新的文件,然后再当前的新页面中打开pdf文件)

html

<template>
  <div class="wrap">
    <div id="demo"></div>
  </div>
</template>

js 

<script>
import Pdfh5 from "pdfh5";  // 这两个一定要引入
import "pdfh5/css/pdfh5.css"; // 这两个一定要引入, 这个是在加载时,顶部会出来一个加载进度条和一些其他的样式
export default {
  name: "openPdf",
  data() {
    return {
      pdfh5: null,
    };
  },
  mounted() {
    // ---------------------------- 方法一 -----------------------------
    this.pdfh5 = new Pdfh5("#demo", {
      pdfurl: "https://www.*********uanfu.pdf", // pdf 地址,请求的地址需要为线上的地址,测试的本地的地址是不可以的
      lazy: true, // 是否懒加载
      withCredentials: true,
      renderType: "svg",
      maxZoom: 3, //手势缩放最大倍数 默认3
      scrollEnable: true, //是否允许pdf滚动
      zoomEnable: true, //是否允许pdf手势缩放
    });
    // --------------------------- 方法二 ---------------------------
    //实例化
    this.pdfh5 = new Pdfh5("#demo", {
        pdfurl: "https://www**********anfu.pdf",
    });
    //监听完成事件
    this.pdfh5.on("complete", function (status, msg, time) {
        console.log("状态:" + status +",信息:" +msg +",耗时:" + time + "毫秒,总页数:" + this.totalNum);
    });
  },
};
</script>

css 

<style>
.wrap {
  width: 100%;
  height: 100%;
  background-color: #fff;
}
/* html,
body, */
#demo {
  width: 100%;
  height: 100%;
}
// 这里高度没有撑满
.viewerContainer {
  height: 100%;
}
</style>

 问题:H5中遇到的问题----在本地运行时,遇到的问题 

1、在使用 本地的相对路径时,出现打不开的pdf的情况

      == 原因:应该是可以使用本地路径,但是打不开可能是因为这里是在本地请求的,然后没有请求回来,这里并没有测试用相对路径在线上是否可以打开

2、报跨域的错误

        == 原因:感觉可能是因为在请求时,请求头是本地的 localhost ,所以出现了跨域,将代码放到测试环境运行时,测试环境的地址和该 pdf 链接的请求地址是同一个域名,所以到线上的时候可以请求,但是如果不一样的话,就需要让后端配置一下请求头

H5查看pdf文件(pdfh5)

H5查看pdf文件(pdfh5)文章来源地址https://www.toymoban.com/news/detail-508829.html

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

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

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

相关文章

  • pdfh5.js的使用以及遇到的坑

    pdfh5的地址: https://www.npmjs.com/package/pdfh5 在项目中引入pdfh5 完成事件on函数的事件名 遇到的坑 引入css的坑 在引入css文件的时候,官方给出了两种方式 第一种:在style标签里面通过@import \\\'pdfh5/css/pdfh5.css’方式,这种方式可能会报错 第二种:在script标签里面通过import ‘pdfh5/c

    2024年02月11日
    浏览(40)
  • h5浏览pdf文件

    将hybrid整个复制到一级文件夹下 hybrid地址:https://download.csdn.net/download/qq_37194189/88157330 创建一个 pdf页面用于展示pdf文件 在要跳转的文件里加方法   就OK啦  

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

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

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

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

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

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

    2024年02月09日
    浏览(36)
  • 如何在【微信小程序 】中的 webview 查看H5页面的console.log和调试H5页面?

    大家好我是 黑臂麒麟 ; 下面是开发微信小程序嵌入H5调试技巧: 问题: 在微信小程序页面中,web-view内嵌了另一个页面url,从小程序跳转到该H5页面的时候,无法看到该H5页面的控制台信息。那就没有办法了么?不,凭着锲而不舍的精神,在网络的海洋遨游许久。我查找到解

    2024年02月17日
    浏览(45)
  • uniapp实现h5、app、微信小程序三端pdf文件下载和预览

    以下代码兼容三端,app,h5,微信小程序,经过个人测试 手机端有两种方法,使用renderjs或者uniapp的api 两者的区别 使用renderjs的写法,会提示用户是否下载文件,下载完成后用户需要手动点击下载的文件,才会打开文件 使用uniapp的api则可以直接下载并直接预览,不需要用户操

    2024年02月11日
    浏览(54)
  • uniapp项目的pdf文件下载与打开查看

    最近写的uniapp项目需要新增一个pdf下载和打开查看功能,摸索了半天终于写了出来,现分享出来供有需要的同行参考,欢迎指正 因为功能写的紧急,还没有摸索出文件重命名方法(因为下载后的文件名是时间戳,这属于优化的一部分)以及自定义文件保存路径方法, 效果图

    2024年02月14日
    浏览(49)
  • vue3+Ts 开发H5项目在线浏览pdf/word/pptx/xlsx文件方法分享

    pdf需要pdfh5这个插件才可以在线浏览,所以我们先下载插件; pdfh5官方地址 注意 “pdfh5”: “^1.4.7” 有问题会出现插件不能完全加载出现504错误 请切换版本下载 “pdfh5”: \\\"^1.4.2\\\"版本 其实很简单 就只用处理一下pdf类型的文件就可以了 其他文件 office 有一个自带的线上网站可以拼

    2024年02月16日
    浏览(56)
  • 微信小程序查看word,excel,ppt以及pdf文件(文档)

     博主介绍: 本人专注于Android/java/数据库/微信小程序技术领域的开发,以及有好几年的计算机毕业设计方面的实战开发经验和技术积累;尤其是在安卓(Android)的app的开发和微信小程序的开发,很是熟悉和了解;本人也是多年的Android开发人员;希望我发布的此篇文件可以帮

    2024年02月07日
    浏览(222)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包