移动端vue3中使用pdf预览

January1207

已于 2022-02-15 15:54:33 修改

阅读量1.5k

点赞数

分类专栏： vue3学习文章标签： vue.js javascript 前端

于 2022-02-15 15:50:53 首次发布

本文链接：https://blog.csdn.net/weixin_41940856/article/details/122946322

版权

vue3学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue项目中利用pdfh5库实现PDF文件的在线预览。首先，通过yarn添加pdfh5依赖，然后在组件模板中引入必要的结构。在setup函数中初始化pdfh5实例，传入PDF文件的URL，并监听'complete'事件以获取加载状态和耗时。此教程适用于前端开发者进行PDF展示功能的集成。

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

Pdfh5源码地址

https://github.com/gjTool/pdfh5

使用步骤

1、安装


yarn add pdfh5

2、在需要使用的页面引入

 <template>
  <div id="pdf-view">
    <div id="pdf"></div>
  </div>
</template>

import Pdfh5 from "pdfh5";
import "pdfh5/css/pdfh5.css";
import {  reactive, toRefs, onMounted } from "vue";

export default {
  name: "PdfView",
  setup() {
    const state = reactive({
      pdfh5: null,
    });

    onMounted(() => {
      state.pdfh5 = new Pdfh5("#pdf", {
        pdfurl: pdf的地址
      });
      state.pdfh5.on("complete", function (status, msg, time) {
        console.log("状态：" +status + "，信息：" +msg + "，耗时：" +time +"毫秒，总页数：" +this.totalNum
        );
      });
    });
    return {
      ...toRefs(state),
    };
  },
};