手机端html展示pdf

手机端使用iframe显示pdf会默认下载

可以用pdfh5来查看的H5中的pdf文件
1.npm安装

npm install pdfh5

2.vue中使用

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

3.js中使用

<script>
import Pdfh5 from "pdfh5";  // 引入插件
import "pdfh5/css/pdfh5.css"; //  这个是在加载时，顶部会出来一个加载进度条和一些其他的样式
export default {
  name: "Pdf",
  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手势缩放
      cMapUrl: "https://cdn.jsdelivr.net/npm/pdfjs-dist@2.5.207/cmaps/",//引入字体库，否则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>
 

4.css样式
自己设置css宽高，否则可能显示不出来