vue3使用pdfh5(安卓端)

最新推荐文章于 2024-08-07 10:28:58 发布

赵啸林

最新推荐文章于 2024-08-07 10:28:58 发布

阅读量1.2k

点赞数 1

分类专栏： JS vue3 文章标签： pdf javascript 前端

本文链接：https://blog.csdn.net/weixin_49295874/article/details/129213532

版权

JS 同时被 2 个专栏收录

56 篇文章 0 订阅

订阅专栏

29 篇文章 1 订阅

订阅专栏

文章介绍了在Vue3项目中使用pdfh5库来展示PDF文件的步骤，包括安装pdfh5、引入库、设置页面元素、初始化插件以及处理iOS设备的PDF预览。在iOS上，利用a标签的点击事件直接预览，而安卓则通过pdfh5打开新页面进行预览。

摘要由CSDN通过智能技术生成

vue3使用pdfh5

1.安装pdfh5

npm install pdfh5

2.引入pdfh5

import Pdfh5 from 'pdfh5';
import 'pdfh5/css/pdfh5.css';

3.页面

<div ref="refPdf" class="refPdf"></div>

4. js

import { defineComponent, onMounted, ref } from 'vue';
setup() {
    const route = useRoute();
    const refPdf = ref(null);
    //页面加载
    onMounted(() => {
      let href = route.query.url;
      const pdfh5 = new Pdfh5(refPdf.value, {
        pdfurl: href
      });
      pdfh5.on('complete', (status, msg, time) => {
        console.log(
          '状态:' + status + '，信息:' + msg + '，耗时:' + time + '毫秒'
        );
      });
    });
    return {
      refPdf
    };
  }

5.ios

//pdf预览
const previewPdf = (val) =>{
	let u = navigator.userAgent;
      let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
      if (isiOS) {
        //a标签打开
         var a = document.createElement("a");
    let href = val;
    a.setAttribute("href", href);
    a.setAttribute("target", "_blank");
    a.setAttribute("id", "startTelMedicine");
    a.onclick = function () {
        //关闭窗口的方法
        window.opener = null;
        window.open("", "_self", "");
        window.close();
    };
    // 防止反复添加
    if (document.getElementById("startTelMedicine")) {
        document.body.removeChild(document.getElementById("startTelMedicine"));
    }
    document.body.appendChild(a);
    a.click();
      } else {
        router.push({
          path: '/pdf',
          query: {
            url: store.IMAGEURL + href
          }
        });
      }
}