vue3预览pdf文件的几种方法

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>

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

【C++】wxWidgets编程的程序入口点

【C++】wxWidgets编程的程序入口点

在wxWidgets中&#xff0c;程序的入口点通过wxIMPLEMENT_APP宏定义来设置&#xff0c;该宏会扩展为一个实现了main函数或者在Windows上是WinMain函数的代码。wxIMPLEMENT_APP宏与wxDECLARE_APP宏一起使用来设置基于wxWidgets的应用程序的启动代码。 使用wxIMPLEMENT_APP宏通常是…
阅读更多...
【AI Agent系列】【MetaGPT】9. 一句话订阅专属信息 - 订阅智能体进阶，实现一个更通用的订阅智能体（2）

【AI Agent系列】【MetaGPT】9. 一句话订阅专属信息 - 订阅智能体进阶，实现一个更通用的订阅智能体（2）

文章目录 0. 前置推荐阅读和本文内容0.1 前置推荐阅读0.2 本文内容 1. 修改一&#xff1a;直接用大模型获取网页信息&#xff0c;不用爬虫程序1.1 我们要给大模型什么内容1.2 提取网页文本信息1.3 组织Action1.4 完整代码及细节注释1.5 可能存在的问题及思考 2. 修改二&#xf…
阅读更多...
实体识别与分类方法综述

实体识别与分类方法综述

目录 前言1 实体识别简介2 基于模板和规则的方法3 基于序列标注的方法3.1 常见序列标注模型3.2 模型参数估计和学习问题3.3 常见序列预测模型 4. 基于深度学习的实体识别方法5 基于预训练语言模型的实体识别5.1 BERT、GPT等预训练语言模型5.2 解码策略 6 特殊问题与挑战6.1 标签…
阅读更多...
视频渲染靠cpu还是显卡 会声会影视频渲染的作用是什么

视频渲染靠cpu还是显卡 会声会影视频渲染的作用是什么

视频渲染最占用的资源就是CPU&#xff0c;多核心多线程&#xff0c;这样才能渲染快。渲染可以在时间线上实时平滑预览&#xff0c;便于编辑&#xff0c;最终导出成片的时候速度也会快一些&#xff0c;渲染就是对每桢的图像进行重新优化的过程。 渲染的作用主要是能够保证使用者…
阅读更多...
C#使用RabbitMQ-2_详解工作队列模式

C#使用RabbitMQ-2_详解工作队列模式

简介 &#x1f340;RabbitMQ中的工作队列模式是指将任务分配给多个消费者并行处理。在工作队列模式中&#xff0c;生产者将任务发送到RabbitMQ交换器&#xff0c;然后交换器将任务路由到一个或多个队列。消费者从队列中获取任务并进行处理。处理完成后&#xff0c;消费者可以向…
阅读更多...
outlook如何群发邮件？外贸邮件群发教程？

outlook如何群发邮件？外贸邮件群发教程？

outlook邮箱群发邮件方法&#xff1f;outlook怎么设置邮件群发&#xff1f; 如果你正在使用Outlook&#xff0c;那么你一定想要知道如何有效地群发邮件。Outlook作为微软办公套件的一部分&#xff0c;不仅功能强大&#xff0c;而且操作简便。下面&#xff0c;蜂邮EDM就来详细讲…
阅读更多...
vscode开发FPGA(1)---TEROS_HDL插件报错

vscode开发FPGA(1)---TEROS_HDL插件报错

一、TerosHDL:modelsim(vlog-66)报错 Error: (vlog-66) Execution of vlib.exe failed 解决办法&#xff1a; 1.新建modelsim工程&#xff0c;并随意编译一个.v文件&#xff0c;将产生的work目录复制到modelsim安装路径下。 2.再将vscode设置verilog>linting>modelsim…
阅读更多...
vue3 + jeecgBoot 获取项目IP地址

vue3 + jeecgBoot 获取项目IP地址

封装的useGlobSetting 函数 引入并使用 import { useGlobSetting } from //hooks/setting;const glob useGlobSetting();console.log(glob.uploadUrl) //http://192.168.105.57:7900/bs-axfd
阅读更多...
docker的资源限制（cgroup）

docker的资源限制（cgroup）

前瞻 Docker 通过 Cgroup 来控制容器使用的资源配额&#xff0c;包括 CPU、内存、磁盘三大方面&#xff0c; 基本覆盖了常见的资源配额和使用量控制。 Cgroup 是 ControlGroups 的缩写&#xff0c;是 Linux 内核提供的一种可以限制、记录、隔离进程组所使用的物理资源(如 CPU、…
阅读更多...
uni-app 接口封装，token过期，自动获取最新的token

uni-app 接口封装，token过期，自动获取最新的token

一、文件路径截图 2、新建一个文件app.js let hosthttp://172.16.192.40:8083/jeecg-boot/ //本地接口 let myApi {login: ${host}wx/wxUser/login, //登录 } module.exports myApi 3、新建一个文件request.js import myApi from /utils/app.js; export const r…
阅读更多...
【云原生】Docker的镜像创建

【云原生】Docker的镜像创建

目录 1&#xff0e;基于现有镜像创建 &#xff08;1&#xff09;首先启动一个镜像&#xff0c;在容器里做修改 ​编辑&#xff08;2&#xff09;然后将修改后的容器提交为新的镜像&#xff0c;需要使用该容器的 ID 号创建新镜像 实验 2&#xff0e;基于本地模板创建 3&am…
阅读更多...
uniapp上传音频文件到服务器

uniapp上传音频文件到服务器

视频教程地址&#xff1a; 【uniapp录音上传组件&#xff0c;将录音上传到django服务器】 https://www.bilibili.com/video/BV1wi4y1p7FL/?share_sourcecopy_web&vd_sourcee66c0e33402a09ca7ae1f0ed3d5ecf7c uniapp 录制音频文件上传到django服务器保存到服务器 &#xf…
阅读更多...
svn和git的本质区别是什么

svn和git的本质区别是什么

参考&#xff1a; https://blog.csdn.net/feiying0canglang/article/details/126550676 上边图中&#xff0c;跨越了区的箭头&#xff0c;它中间的区数据都会同步。例如&#xff1a;git checkout &#xff0c;它是将本地仓库数据更新到暂存区和工作区的。\ 理解 gitlab和svn都…
阅读更多...
【深度优先搜索】【C++算法】834 树中距离之和

【深度优先搜索】【C++算法】834 树中距离之和

作者推荐 【动态规划】【map】【C算法】1289. 下降路径最小和 II 本文涉及知识点 深度优先搜索 树 图论 LeetCode834 树中距离之和 给定一个无向、连通的树。树中有 n 个标记为 0…n-1 的节点以及 n-1 条边 。 给定整数 n 和数组 edges &#xff0c; edges[i] [ai, bi]表…
阅读更多...
【AIGC】Diffusers:训练扩散模型

【AIGC】Diffusers:训练扩散模型

前言 无条件图像生成是扩散模型的一种流行应用&#xff0c;它生成的图像看起来像用于训练的数据集中的图像。通常&#xff0c;通过在特定数据集上微调预训练模型来获得最佳结果。你可以在HUB找到很多这样的模型&#xff0c;但如果你找不到你喜欢的模型&#xff0c;你可以随时训…
阅读更多...
vue常用指令(v-for)

vue常用指令(v-for)

一、v-for 指令 作用: 根据数据生成列表结构 二、代码演示 1、在li标签中获取数组元素 代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-wid…
阅读更多...
2024年 复习 HTML5+CSS3+移动web 笔记 之CSS遍

2024年 复习 HTML5+CSS3+移动web 笔记 之CSS遍

第一天第二天第三天 1.1 引入方式 1.2 选择器 1.3 画盒子 1.4 文字控制 1.5 综合案例 一 新闻详情 2.1 复合选择器 2.2 伪类选择器 2.3 CSS 特性 2.4 Emmet 写法 2.5 背景属性 2.6 显示模式 2.6 综合案例 一 热词 &#xff08;设计稿&#xff1f;&#xff09; 2.7 综合案例 一…
阅读更多...
金蝶云星空-表单插件，点击事件（一）

金蝶云星空-表单插件，点击事件（一）

表单插件&#xff0c;点击事件 BarItemClick、AfterBarItemClick 有时候我们在不通的场景中使用到自己的企业的逻辑思维 业务场景&#xff1a;采购订单上&#xff0c;增加一个按钮tbCeShi&#xff0c;添加下面的插件&#xff0c;弹出一个对话框&#xff1b; 添加一个按钮&am…
阅读更多...
前端怎么监听手机键盘是否弹起

前端怎么监听手机键盘是否弹起

摘要&#xff1a; 开发移动端中&#xff0c;经常会遇到一些交互需要通过判断手机键盘是否被唤起来做的&#xff0c;说到判断手机键盘弹起和收起&#xff0c;应该都知道&#xff0c;安卓和ios判断手机键盘是否弹起的写法是有所不同的&#xff0c;下面讨论总结一下两端的区别以及…
阅读更多...
前端学习生产环境、开发环境、测试环境

前端学习生产环境、开发环境、测试环境

1、路径 定义是什么环境 NODE_ENVdevelopment 开发环境 2、.env 端口号 3、.env.development 开发环境 4、.env.production 生产环境 5、.env.test 测试环境 6、如何访问&#xff0c;通过process.env进行访问 学习中.......
阅读更多...
最新文章

Copyright @ 2022~2023