前端h5 打开pdf文件

最新推荐文章于 2024-06-03 17:52:58 发布

skybel

最新推荐文章于 2024-06-03 17:52:58 发布

阅读量4k

点赞数 1

分类专栏： pdfh5 vue.js h5 文章标签：前端

本文链接：https://blog.csdn.net/skybel/article/details/124343877

版权

h5 同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

pdfh5

1 篇文章 0 订阅

订阅专栏

vue.js

1 篇文章 0 订阅

订阅专栏

我所使用的是基于pdf.js封装过的pdfh5.js
一. 先安装依赖

npm install pdfh5

二.局部引入

import Pdfh5 from “pdfh5”;
import “pdfh5/css/pdfh5.css”;

三.模版

<div>
  <div @click="visible = false" :class="$style.iconContain">
      <span :class="$style.iconClose" class="xiaoicon">&#xe759;</span>
  </div>
  <div id="preViewPdf"></div>
</div>

四.方法

data() {
  return {
     pdfh5: ''
  }
},
mounted(){
  this.openPdf()
},
method:{
  openPdf(){
   this.pdfh5 = new Pdfh5("#preViewPdf", {
      pdfurl: '',  // 地址
      lazy: true,  // 是否懒加载
      withCredentials: true,
      renderType: "svg",
   });
}
}