vue3预览pdf文件的几种方法

news2024/11/15 21:31:36

vue3预览pdf集中方法

方法一：

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>
      <!-- <iframe
          src="E:\\1.pdf"
          frameborder="0"
          style="width: 80%; height: 100vh; margin: auto; display: block"
        ></iframe> -->

      <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/1411558.html

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

相关文章

Objective-C方法的声明实现及调用

Objective-C方法的声明实现及调用

1.无参数的方法 1)声明 a.位置&#xff1a;在interface括弧的外面 b.语法&#xff1a; - (返回值类型)方法名称; interface Person : NSObject -(void) run; end 2)实现 a.位置&#xff1a;在implementation中实现 b.语法&#xff1a;加大括弧将方法实现的代码写在大括孤之中 …
阅读更多...
浅出深入-机器学习

浅出深入-机器学习

文章目录 一、K近邻算法1.1 先画一个散列图1.2 使用K最近算法建模拟合数据1.3 进行预测1.4 K最近邻算法处理多元分类问题1.5 K最近邻算法用于回归分析1.6 K最近邻算法项目实战-酒的分类1.6.1 对数据进行分析1.6.2 生成训练数据集和测试数据集1.6.3 使用K最近邻算法对数据进行建…
阅读更多...
抽象工厂模式-C#实现

抽象工厂模式-C#实现

该实例基于WPF实现&#xff0c;直接上代码&#xff0c;下面为三层架构的代码。 一 Model using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks;namespace 设计模式练习.Model.抽象工厂模式 {public abstrac…
阅读更多...
学习笔记之 机器学习之预测雾霾

学习笔记之 机器学习之预测雾霾

文章目录 Encoder-DecoderSeq2Seq (序列到序列&#xff09; Encoder-Decoder 基础的Encoder-Decoder是存在很多弊端的&#xff0c;最大的问题就是信息丢失。Encoder将输入编码为固定大小的向量的过程实际上是一个“信息有损的压缩过程”&#xff0c;如果信息量越大&#xff0c;…
阅读更多...
Rollup：打包 TypeScript - React 组件库

Rollup：打包 TypeScript - React 组件库

调用浏览器摄像头拍照组件 1、前提1、安装依赖2、添加 rollup.config.js 配置3、修改 package.json3.1 添加打包命令3.2 添加组件入口3.3 添加组件声明入口3.4 浏览器支持 1、前提 1.1 通过 create-react-app take-photo --template 创建前端应用 1.2 添加组件 TakePhoto (拍照…
阅读更多...
华为三层交换机之基本操作

华为三层交换机之基本操作

Telnet简介 Telnet是一个应用层协议,可以在Internet上或局域网上使用。它提供了基于文本的远程终端接口&#xff0c;允许用户在本地计算机上登录到远程计算机&#xff0c;然后像在本地计算机上一样使用远程计算机的资源。Telnet客户端和服务器之间的通信是通过Telnet协议进行的…
阅读更多...
＜蓝桥杯软件赛＞零基础备赛20周--第17周--并查集

＜蓝桥杯软件赛＞零基础备赛20周--第17周--并查集

报名明年4月蓝桥杯软件赛的同学们&#xff0c;如果你是大一零基础&#xff0c;目前懵懂中&#xff0c;不知该怎么办&#xff0c;可以看看本博客系列&#xff1a;备赛20周合集 20周的完整安排请点击&#xff1a;20周计划 每周发1个博客&#xff0c;共20周。 在QQ群上交流答疑&am…
阅读更多...
JavaSE基础学习

JavaSE基础学习

一、编程入门 二、Java语言概述 三、Java基本语法 四、程序流程控制 五、数组 六、面向对象(上) 数组工具类的封装: 七、面向对象(中) 八、面向对象(下) 九、异常处理 十、多线程 十一、常用类 十二、枚举类与注解 十三、集合 十四、泛型 十五、IO流 十六、网络编程 十七、反射…
阅读更多...
【论文阅读】Grasp-Anything: Large-scale Grasp Dataset from Foundation Models

【论文阅读】Grasp-Anything: Large-scale Grasp Dataset from Foundation Models

文章目录 Grasp-Anything: Large-scale Grasp Dataset from Foundation Models针对痛点和贡献摘要和结论引言相关工作Grasp-Anything 数据集实验 - 零镜头抓取检测实验 - 机器人评估总结 Grasp-Anything: Large-scale Grasp Dataset from Foundation Models Project page&…
阅读更多...
【重点】【DP】123.买卖股票的最佳时机III

【重点】【DP】123.买卖股票的最佳时机III

题目 法1&#xff1a;单次遍历&#xff0c;Best! class Solution {public int maxProfit(int[] prices) {int f1 -prices[0], f2 0, f3 -prices[0], f4 0;for (int i 1; i < prices.length; i) {f1 Math.max(f1, -prices[i]);f2 Math.max(f2, f1 prices[i]);f3 Ma…
阅读更多...
Cesium中实现流体模拟

Cesium中实现流体模拟

流体模拟 流体模拟是指通过数学模型和计算机算法来模拟流体行为的过程。它可以用来研究和预测各种液体和气体的运动、相互作用和变形。 流体模拟有多种方法&#xff0c;下面列举了几种常见的方法&#xff1a; 网格方法&#xff1a;网格方法是最常用的流体模拟方法之一。它将模…
阅读更多...
VSCode Vue项目中报错 [vue/require-v-for-key]

VSCode Vue项目中报错 [vue/require-v-for-key]

报错 [vue/require-v-for-key] Elements in iteration expect to have v-bind:key directives.eslint-plugin-vue 解决办法&#xff1a; 在设置里把这个取消勾选
阅读更多...
Java 数据库连接

Java 数据库连接

1&#xff0c;JDBC概述 在开发中我们使用的是java语言&#xff0c;那么势必要通过java语言操作数据库中的数据。这就是接下来要学习的JDBC。 1.1 JDBC概念 JDBC 就是使用Java语言操作关系型数据库的一套API 全称&#xff1a;( Java DataBase Connectivity ) Java 数据库连接 …
阅读更多...
单片机14-17

单片机14-17

目录 LCD1602 LCD1602液晶显示屏 直流电机驱动&#xff08;PWM&#xff09; LED呼吸灯 直流电机调速 AD/DA&#xff08;SPI通信&#xff09; AD模数转换 DA数模转换 红外遥控&#xff08;外部中断&#xff09; 红外遥控 红外遥控电机调速 LCD1602 LCD1602液晶显示屏 …
阅读更多...
智能语音识别源码系统+语义理解+对话管理+语音合成 带完整的搭建教程

智能语音识别源码系统+语义理解+对话管理+语音合成 带完整的搭建教程

人工智能技术的不断发展&#xff0c;智能语音识别技术逐渐成为人们日常生活和工作中不可或缺的一部分。然而&#xff0c;目前市场上的智能语音识别产品大多存在一定的局限性&#xff0c;如识别率不高、功能单一等。为了解决这些问题&#xff0c;罗峰给大家分享一款基于智能语音…
阅读更多...
pytorch学习笔记（十一）

pytorch学习笔记（十一）

优化器学习 把搭建好的模型拿来训练&#xff0c;得到最优的参数。 import torch.optim import torchvision from torch import nn from torch.nn import Sequential, Conv2d, MaxPool2d, Flatten, Linear from torch.utils.data import DataLoaderdataset torchvision.datas…
阅读更多...
【Python】采用OpenCV和Flask来进行网络图像推流的低延迟高刷FPS方法（项目模板）

【Python】采用OpenCV和Flask来进行网络图像推流的低延迟高刷FPS方法（项目模板）

【Python】采用OpenCV和Flask来进行网络图像推流的低延迟高刷FPS方法&#xff08;项目模板&#xff09; gitee项目模板&#xff1a; 网络图像推流项目模板&#xff08;采用OpenCV和Flask来进行网络图像推流的低延迟高刷FPS方法&#xff09; 前文&#xff1a; 【最简改进】基于…
阅读更多...
深入浅出 diffusion（2）：pytorch 实现 diffusion 加噪过程

深入浅出 diffusion（2）：pytorch 实现 diffusion 加噪过程

我在上篇博客深入浅出 diffusion&#xff08;1&#xff09;&#xff1a;白话 diffusion 原理&#xff08;无公式&#xff09;中介绍了 diffusion 的一些基本原理&#xff0c;其中谈到了 diffusion 的加噪过程&#xff0c;本文用pytorch 实现下到底是怎么加噪的。 import torch…
阅读更多...
最小覆盖子串（Leetcode76）

最小覆盖子串（Leetcode76）

例题&#xff1a; 分析: 比如现在有字符串&#xff08;s&#xff09;&#xff0c;s "ADOBECODEBANC", 给出目标字符串 t "ABC", 题目就是要从原始字符串&#xff08;s&#xff09;中找到一个子串&#xff08;res&#xff09;可以覆盖目标字符串 t &…
阅读更多...
UE使用C++添加FGameplayTag(游戏标签)

UE使用C++添加FGameplayTag(游戏标签)

首先Ue会有一个UGameplayTagsManager类型的对象 游戏标签管理器(全局中就有一个) 我们直接通过 UGameplayTagsManager::Get()静态函数拿到 全局唯一的游戏标签管理器的实例 返回的是个左值引用 之后通过调用 AddNativeGameplayTag()函数就可添加游戏标签了 就这么简单 第…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023