vue预览pdf文件的几种方法

news2024/10/7 4:27:16

文章目录

  • vue预览pdf集中方法
  • 方法一：
  • 方法二：
    • 展示效果：
    • 需要包依赖：
    • 代码：
  • 方法三：
    • 展示效果：
    • 需要包依赖：
    • 代码：
    • 自己调参数，选择符合自己的

vue预览pdf集中方法

我这里主要是用在vue3项目中，但是vue2或者react可以借鉴这里面的包依赖，应该也可以，可以尝试着写写，或者找其他方法。

方法一：

iframe：这种方法显示有点丑
展示效果就不展示了，就iframe，主要看你浏览器怎么识别了，你可以想象得到；

      <iframe
        src="E:\\1.pdf"
        frameborder="0"
        style="width: 80%; height: 100vh; margin: auto; display: block"
      ></iframe>

方法二：

展示效果：

在这里插入图片描述

需要包依赖：

    "pdfobject": "^2.2.12",

代码：

<template>
  <a-layout class="layout">
    <Header />
    <a-layout-content class="main-container">
      <div class="topBtn">
        <div>
          <a-button type="primary" @click="handleBack" ghost>返回上一页</a-button>
        </div>
        <div>
          <a-button type="primary" @click="downPdf">下载说明书</a-button>
        </div>
      </div>
      <div id="example1"></div>
    </a-layout-content>
  </a-layout>
</template>

<script lang="ts" setup>
import { getCurrentInstance, ref, onMounted, onUnmounted } from 'vue';
import { useRouter, useRoute, createWebHistory } from 'vue-router';
import Header from '/@/components/Header/index.vue';
const router = useRouter();
import { serverAddress } from '/@/serve/index';
const VITE_APP_URL = serverAddress();
import { download } from '/@/libs/utils/download';

const handleBack = () => {
  router.go(-1);
};
var pdfobject = require('pdfobject');
// 参考网址， https://blog.csdn.net/liang_wf/article/details/101453932
let pdfPath = ref('http://192.168.11.50:8102/database/bio/load_file/BYimage/ncov.pdf');
const downPdf = () => {
  download(pdfPath.value, 'PDF报告.pdf');
};
onMounted(() => {
  var options = {
    height: '100%',
    pdfOpenParams: {
      view: 'FitH',
      page: '1',
      toolbar: '0',
      //   toolbar: '1',
      // pagemode: 'none',
    },
  };
  pdfobject.embed(pdfPath.value, '#example1', options);
});
</script>

<style lang="less" scoped>
#example1 {
  //   border: 1px solid red;
  //   width: 100%;
  //   display: block;
  //   margin: auto;
  height: calc(100vh - 146px - 19px);
}

.layout {
  //   min-width: 1400px;
  min-height: 100vh;
}

.main-container {
  flex-direction: row;
  padding: 19px 70px;
  background-color: @bg-color;
  .topBtn {
    // border: 1px solid red;

    height: 60px;
    line-height: 60px;
    display: flex;
    justify-content: space-between;
  }
}
</style>

方法三：

展示效果：

效果一：分页
在这里插入图片描述
效果二：不分页
在这里插入图片描述

需要包依赖：

    "vue-pdf-embed": "^1.1.6",
    "vue3-pdfjs": "^0.1.6",

代码：

自己调参数，选择符合自己的

<template>
  <div class="pdf-preview">
    <div class="page-tool">
      <div class="page-tool-item" @click="lastPage">上一页</div>
      <div class="page-tool-item" @click="nextPage">下一页</div>
      <div class="page-tool-item">{{ state.pageNum }}/{{ state.numPages }}</div>
      <div class="page-tool-item" @click="pageZoomOut">放大</div>
      <div class="page-tool-item" @click="pageZoomIn">缩小</div>
    </div>
    <div class="pdf-wrap">
      <vue-pdf-embed :source="state.source" :style="scale" class="vue-pdf-embed" :page="state.pageNum" />
    </div>
  </div>
</template>
<script setup lang="ts">
import { reactive, computed } from "vue";
import VuePdfEmbed from "vue-pdf-embed/dist/vue3-pdf-embed";
import { createLoadingTask } from "vue3-pdfjs";

const props = defineProps({
  pdfUrl: {
    type: String,
    required: true
  }
})

// const emit = defineEmits<{ (event: 'getPdfUrl', name: string): void }>()
// const getPdfUrl = ()=>{
//   emit('getPdfUrl', props.pdfUrl)
// }

const state = reactive({
  source: `http://192.168.11.50:8102/database/bio/load_file/BYimage/ncov.pdf`, // 预览pdf文件地址
  pageNum: 1, // 当前页面
  scale: 1, // 缩放比例
  numPages: 0, // 总页数
});

const loadingTask = createLoadingTask(state.source);
loadingTask.promise.then((pdf: { numPages: number }) => {
  state.numPages = pdf.numPages;
});

const scale = computed(() => `transform:scale(${state.scale})`)
function lastPage() {
  if (state.pageNum > 1) {
    state.pageNum -= 1;
  }
}
function nextPage() {
  if (state.pageNum < state.numPages) {
    state.pageNum += 1;
  }
}
function pageZoomOut() {
  if (state.scale < 2) {
    state.scale += 0.1;
  }
}
function pageZoomIn() {
  if (state.scale > 1) {
    state.scale -= 0.1;
  }
}

</script>
<style lang="css" scoped>
.pdf-preview {
  position: relative;
  height: 100vh;
  padding: 20px 0;
  box-sizing: border-box;
  background-color: e9e9e9;
}

.pdf-wrap {
  overflow-y: auto;
}

.vue-pdf-embed {
  text-align: center;
  width: 515px;
  border: 1px solid #e5e5e5;
  margin: 0 auto;
  box-sizing: border-box;
}

.page-tool {
  position: absolute;
  bottom: 35px;
  padding-left: 15px;
  padding-right: 15px;
  display: flex;
  align-items: center;
  background: rgb(66, 66, 66);
  color: white;
  border-radius: 19px;
  z-index: 100;
  cursor: pointer;
  margin-left: 50%;
  transform: translateX(-50%);
}

.page-tool-item {
  padding: 8px 15px;
  padding-left: 10px;
  cursor: pointer;
}
</style>

<template>
  <div class="pdf-preview">
    <!-- <div class="page-tool">
      <div class="page-tool-item" @click="lastPage">上一页</div>
      <div class="page-tool-item" @click="nextPage">下一页</div>
      <div class="page-tool-item">{{ state.pageNum }}/{{ state.numPages }}</div>
      <div class="page-tool-item" @click="pageZoomOut">放大</div>
      <div class="page-tool-item" @click="pageZoomIn">缩小</div>
    </div> -->
    <div class="pdf-wrap">
      <vue-pdf-embed :source="state.source" :style="scale" class="vue-pdf-embed" :page="state.pageNum" />
    </div>
  </div>
</template>
<script setup lang="ts">
import { reactive, computed } from "vue";
import VuePdfEmbed from "vue-pdf-embed/dist/vue3-pdf-embed";
import { createLoadingTask } from "vue3-pdfjs";

const props = defineProps({
  pdfUrl: {
    type: String,
    required: true
  }
})

// const emit = defineEmits<{ (event: 'getPdfUrl', name: string): void }>()
// const getPdfUrl = ()=>{
//   emit('getPdfUrl', props.pdfUrl)
// }

const state = reactive({
  source: `http://192.168.11.50:8102/database/bio/load_file/BYimage/ncov.pdf`, // 预览pdf文件地址
 
});

const loadingTask = createLoadingTask(state.source);
loadingTask.promise.then((pdf: { numPages: number }) => {
  state.numPages = pdf.numPages;
});

const scale = computed(() => `transform:scale(${state.scale})`)
function lastPage() {
  if (state.pageNum > 1) {
    state.pageNum -= 1;
  }
}
function nextPage() {
  if (state.pageNum < state.numPages) {
    state.pageNum += 1;
  }
}
function pageZoomOut() {
  if (state.scale < 2) {
    state.scale += 0.1;
  }
}
function pageZoomIn() {
  if (state.scale > 1) {
    state.scale -= 0.1;
  }
}

</script>
<style lang="css" scoped>
.pdf-preview {
  position: relative;
  height: 100vh;
  padding: 20px 0;
  box-sizing: border-box;
  background-color: e9e9e9;
}

.pdf-wrap {
  overflow-y: auto;
}

.vue-pdf-embed {
  text-align: center;
  width: 515px;
  border: 1px solid #e5e5e5;
  margin: 0 auto;
  box-sizing: border-box;
}

.page-tool {
  position: absolute;
  bottom: 35px;
  padding-left: 15px;
  padding-right: 15px;
  display: flex;
  align-items: center;
  background: rgb(66, 66, 66);
  color: white;
  border-radius: 19px;
  z-index: 100;
  cursor: pointer;
  margin-left: 50%;
  transform: translateX(-50%);
}

.page-tool-item {
  padding: 8px 15px;
  padding-left: 10px;
  cursor: pointer;
}
</style>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1418174.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

selenium-Web界面搜索功能测试

selenium-Web界面搜索功能测试

&#x1f345; 视频学习&#xff1a;文末有免费的配套视频可观看 &#x1f345; 关注公众号&#xff1a;互联网杂货铺&#xff0c;回复1 &#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;薪资嘎嘎涨 测试环境准备&#xff1a; 1、安装Python 2、安装Ch…
阅读更多...
C++面试宝典第25题：阶乘末尾零的个数

C++面试宝典第25题：阶乘末尾零的个数

题目 给定一个整数n，返回n!（n的阶乘）结果尾数中零的个数。 示例 1： 输入：3 输出：0 解释：3! = 6，尾数中没有零。 示例 2： 输入：5 输出：1 解释：5! = 120，尾数中有1个零。 解析 这道题主要考察应聘者对于数学问题的分析和理解能力，以及在多个解决方案中，寻求最优…
阅读更多...
Python 拼接字符串的 7 种方式

Python 拼接字符串的 7 种方式

忘了在哪看到一位编程大牛调侃&#xff0c;他说程序员每天就做两件事&#xff0c;其中之一就是处理字符串。相信不少同学会有同感。 几乎任何一种编程语言&#xff0c;都把字符串列为最基础和不可或缺的数据类型。而拼接字符串是必备的一种技能。今天&#xff0c;我跟大家一起来…
阅读更多...
Github 2024-01-28 开源项目日报Top10

Github 2024-01-28 开源项目日报Top10

根据Github Trendings的统计&#xff0c;今日(2024-01-28统计)共有10个项目上榜。根据开发语言中项目的数量&#xff0c;汇总情况如下&#xff1a; 开发语言项目数量Python项目3TypeScript项目2Rust项目1HTML项目1JavaScript项目1Cuda项目1C#项目1非开发语言项目1 Nuxt&#…
阅读更多...
Spring Boot通过配置文件支持数据库自定义表名

Spring Boot通过配置文件支持数据库自定义表名

直接上干货&#xff1a; 例如一个叫xxx的项目&#xff0c;yml文件里加上这段 xxxproject:db:xxxTable: xxx_dbname #自定义的数据库表名创一个Configuration类放表名和Mapper // XxxProjectAutoConfiguration.javaConfiguration MapperScan(basePackages "cn.com.xxxp…
阅读更多...
蓝牙----蓝牙连接建立_连接建立

蓝牙----蓝牙连接建立_连接建立

蓝牙----蓝牙连接建立_连接建立 蓝牙连接建立过程图1.主机扫描到广播包1.1判断是否是自己关心的广播包1.2广播地址添加到扫描列表 2.主机扫描结束&#xff0c;建立连接3.主从连接成功后&#xff0c;执行连接建立后事件3.1.主机将连接句柄和设备地址添加到连接列表3.2.主机进行G…
阅读更多...
ad18学习笔记十六：v割

ad18学习笔记十六：v割

所谓“V割”是印刷电路板&#xff08;PCB&#xff09;厂商依据客户的图纸要求&#xff0c;事先在PCB的特定位置用转盘刀具切割好的一条条分割线&#xff0c;其目的是为了方便后续SMT电路板组装完成后的分板之用&#xff0c;因为其切割后的外型看起来就像个英文的“V”字型&…
阅读更多...
msfconsole实战使用（结合靶场演示）

msfconsole实战使用（结合靶场演示）

msfconsole实战使用 前言 MSFconsole&#xff08;Metasploit Framework Console&#xff09;是Metasploit框架的一部分&#xff0c;是一个功能强大的渗透测试工具。Metasploit框架是一个开源的安全工具&#xff0c;旨在开发、测试和执行针对计算机系统的攻击。MSFconsole是Me…
阅读更多...
SpringMvc切换Json转换工具

SpringMvc切换Json转换工具

SpringBoot切换使用goolge的Gson作为SpringMvc的Json转换工具 <!-- gson依赖 --> <dependency><groupId>com.google.code.gson</groupId><artifactId>gson</artifactId> </dependency>Configuration public class JsonWebConfig {B…
阅读更多...
ThreadLocal学习笔记

ThreadLocal学习笔记

ThreadLocal类图 ThreadLocal/InheritableThreadLocal/ \TransmittableThreadLocal(阿里巴巴) TransmissibleThreadLocal(阿里巴巴)ThreadLocal 这是Thread类的局部变量&#xff0c;每个线程私有。 它主要用于解决多线程中的数据共享问题&#xff0c;保…
阅读更多...
把数组中的key都取出来然后去重

把数组中的key都取出来然后去重

今日接到一个小需求&#xff0c;一张表有类似这样的数据&#xff1a;&#xff08;下面是一行&#xff09; 但是每行的数据&#xff0c;主要是key不一样&#xff0c;我们想把所有的key取出来&#xff0c;并且做个去重。 首先我先在mysql中&#xff0c; SELECT GROUP_CONCAT(RE…
阅读更多...
在租户内启用SharePoint Embedded

在租户内启用SharePoint Embedded

要开启 SharePoint Embedded&#xff0c;你得是管理员&#xff0c;然后按照这些步骤操作&#xff1a; 登录到你的 SharePoint 管理中心。在左边的菜单里找到“设置”选项&#xff0c;点进去。 3. 在设置页面里找到“SharePoint Embedded 应用”。 4.如果这个功能还没开启&…
阅读更多...
高阶测试开发必备技能: k8s入门！

高阶测试开发必备技能: k8s入门！

现在稍微有点规模公司都是基于docker容器化部署技巧&#xff0c;K8s现在主流&#xff0c;应用最广的容器集群管理技术。 k8s全称kubernetes&#xff08;首字母为 k、首字母与尾字母之间有 8 个字符、尾字母为 s&#xff0c;所以简称 k8s&#xff09;&#xff0c;基于Docker容器…
阅读更多...
Top-level await is not available in the configured target environment

Top-level await is not available in the configured target environment

当在使用 Vite 进行项目构建时&#xff0c;可能会遇到如下错误提示&#xff1a;ERROR: Top-level await is not available in the configured target environment。 问题原因 这个错误通常是由于项目配置中的目标浏览器环境不支持 JavaScript 的 top-level-await 特性。top-le…
阅读更多...
探索Viper-适用于GoLang的完整配置解决方案

探索Viper-适用于GoLang的完整配置解决方案

前言 对于现代应用程序&#xff0c;尤其大中型的项目来说&#xff0c;在程序启动和运行时&#xff0c;往往需要传入许多参数来控制程序的行为&#xff0c;我们可以通过命令行参数&#xff0c;环境变量&#xff0c;配置文件等方式来将参数传递给程序。而Viper库为Golang语言开发…
阅读更多...
Mac安装配置maven

Mac安装配置maven

Mac安装配置maven 官网下载地址&#xff1a;https://maven.apache.org/download.cgi 下载好以后解压配置 maven 环境变量 打开终端&#xff0c;输入命令打开配置文件./bash_profile open ~/.bash_profile输入i进入编辑模式,进行maven配置; MAVEN_HOME为maven的本地路径 ex…
阅读更多...
VR全景技术对党建宣传有什么好处，如何应用在党建宣传

VR全景技术对党建宣传有什么好处，如何应用在党建宣传

引言&#xff1a; 近年来&#xff0c;随着VR&#xff08;虚拟现实&#xff09;全景技术的不断发展&#xff0c;其在各个领域的应用也愈加广泛。在党建宣传方面&#xff0c;VR全景技术正逐渐成为一种创新而强大的工具&#xff0c;为组织的思想宣传提供了全新的方式。 一&#x…
阅读更多...
SpringBoot 实现自定义指标监控

SpringBoot 实现自定义指标监控

一、添加业务监控指标 在 spring-web-prometheus-demo 项目的基础上&#xff0c;我们添加一个 PrometheusCustomMonitor 类。在这里面我们定义了三个业务指标&#xff1a; order_request_count&#xff1a;下单总次数order_amount_sum&#xff1a;下单总金额 Component publ…
阅读更多...
全球医疗器械产品查询-30个官网查询系统合集！

全球医疗器械产品查询-30个官网查询系统合集！

国内外上市医疗器械产品数据及注册备案信息是医疗器械行业中极其重要的情报之一。大多数医械人都知道国内医疗器械产品信息可在NPMA及各省市药监局官网查询&#xff0c;但对于国际的医疗器械产品数据披露平台&#xff0c;由于语言壁垒及网页设计习惯差异&#xff0c;查询却不太…
阅读更多...
深入了解Redis：选择适用于你的场景的持久化方案

深入了解Redis：选择适用于你的场景的持久化方案

自然语言处理的发展 文章目录 自然语言处理的发展强烈推荐前言&#xff1a;Redis提供了几种主要的持久化方案&#xff1a;RDB快照持久化&#xff1a;工作原理&#xff1a; AOF日志文件持久化&#xff1a;混合持久化&#xff1a; 总结强烈推荐专栏集锦写在最后 强烈推荐 前些天…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023