当前位置: 首页 > news >正文

vue3 实现pdf预览

需要下载pdfjs-dist

<template><a-modal class="fill-modal" v-model:open="state.visible" :title="state.modalTitle" width="50%" @cancel="handleCancel"><div class="preview-btns-posi"><a-button type="primary" @click="exportBtn" :loading="state.downLoading">下载</a-button><a-button @click="handleCancel" type="primary">返回</a-button></div><div class="interviewVideo_main" id="videoContainer"><!--此处根据pdf的页数动态生成相应数量的canvas画布--><canvas v-show="state.show" v-for="pageIndex in pdfPages" :id="`pdf-canvas-` + pageIndex" :key="pageIndex"style="display: block;width:100%;" class="canvas"></canvas></div><template #footer></template></a-modal>
</template>
<script lang="ts" setup>
import { ref, reactive, nextTick } from "vue";
import * as pdfjsLib from "pdfjs-dist/build/pdf.js";import * as workerSrc from 'pdfjs-dist/build/pdf.worker.min.js'
import { message } from "ant-design-vue";
import { downloadBlobAsync } from "@/lib/tool";let pdfPages = ref(0); // pdf文件的页数
let pdfDoc: any = reactive({})
let pdfScale = ref(1.0); // 缩放比例
const state: any = reactive({visible: false,downLoading: false,modalTitle: '预览文件',show: false
})
const props = defineProps<{file: {previewPath: string,originalFileName: string,path: string,}
}>()//调用loadFile方法
//获取pdf文档流与pdf文件的页数
const loadFile = async (url: string) => {try {pdfjsLib.GlobalWorkerOptions.workerSrc = workerSrc;const loadingTask = pdfjsLib.getDocument(url);loadingTask.promise.then((pdf: any) => {state.show = true;pdfDoc = pdf;pdfPages.value = pdf.numPages;nextTick(() => {renderPage(1);});}).catch((err: any) => {console.error(err);pdfDoc = nullstate.show = false});} catch (error) {console.error(error)}
};
//渲染pdf文件
const renderPage = (num: number) => {pdfDoc?.getPage(num).then((page: any) => {const canvasId = "pdf-canvas-" + num;const canvas = <any>document.getElementById(canvasId);const ctx = canvas.getContext("2d");const dpr = window.devicePixelRatio || 1;const bsr =ctx.webkitBackingStorePixelRatio ||ctx.mozBackingStorePixelRatio ||ctx.msBackingStorePixelRatio ||ctx.oBackingStorePixelRatio ||ctx.backingStorePixelRatio ||1;const ratio = dpr / bsr;const viewport = page.getViewport({ scale: pdfScale.value });canvas.width = viewport.width * ratio;canvas.height = viewport.height * ratio;canvas.style.width = viewport.width + "px";canvas.style.height = viewport.height + "px";ctx.setTransform(ratio, 0, 0, ratio, 0, 0);const renderContext = {canvasContext: ctx,viewport: viewport,};page.render(renderContext);if (num < pdfPages.value) {renderPage(num + 1);}});
};
function openModal() {state.visible = true;nextTick(() => {loadFile(props.file.previewPath);})
}
function handleCancel() {state.visible = false;
}
async function exportBtn() {try {state.downLoading = trueif (!props.file?.path) {message.warning(`无地址,可供下载`)return;}await downloadBlobAsync(props.file?.path, props.file?.originalFileName, true)} catch (error: any) {message.error(error)} finally {state.downLoading = false}
}defineExpose({openModal
})
</script>
<style>
#videoContainer {height: 500px;width: 100%;overflow: auto;.canvas {width: 80% !important;margin: 0 auto;}
}.preview-btns-posi {position: absolute;top: 10px;right: 50px;
}
</style>
/**下载文件 */
export const downloadBlobAsync = (blob: Blob | string, fileName: string, isUrl = false) => {return new Promise<void>((resolve, reject) => {try {//对于<a>标签,只有 Firefox 和 Chrome(内核) 支持 download 属性//IE10以上支持blob但是依然不支持downloadif ('download' in document.createElement('a')) {//支持a标签download的浏览器const link = document.createElement('a'); //创建a标签link.download = fileName; //a标签添加属性link.style.display = 'none';link.href = isUrl ? blob as string : URL.createObjectURL(blob as Blob);document.body.appendChild(link);link.click(); //执行下载URL.revokeObjectURL(link.href); //释放urldocument.body.removeChild(link); //释放标签} else {//其他浏览器(navigator as any)?.msSaveBlob(blob, fileName);}} catch (error) {console.log(error)reject(error);} finally {setTimeout(() => {resolve()}, 500)}})
};

相关文章:

vue3 实现pdf预览

需要下载pdfjs-dist <template><a-modal class"fill-modal" v-model:open"state.visible" :title"state.modalTitle" width"50%" cancel"handleCancel"><div class"preview-btns-posi"><a-…...

【React】Redux基本使用

什么情况使用 Redux &#xff1f; Redux 适用于多交互、多数据源的场景。简单理解就是复杂 从组件角度去考虑的话&#xff0c;当我们有以下的应用场景时&#xff0c;我们可以尝试采用 Redux 来实现 某个组件的状态需要共享时 一个组件需要改变其他组件的状态时 一个组件需要…...

Banana Pi BPI-W3之RK3588安装Qt+opencv+采集摄像头画面.

场景&#xff1a;在Banana Pi BPI-W3 RK3588上做qt开发工作RK3588安装Qtopencv采集摄像头画面 2. 环境介绍 硬件环境&#xff1a; Banana Pi BPI-W3RK3588开发板、MIPI-CSI摄像头( ArmSoM官方配件 )软件版本&#xff1a; OS&#xff1a;ArmSoM-W3 Debian11 QT&#xff1a;QT5…...

OCR转换技巧:如何避免图片转Word时出现多余的换行?

在将图片中的文字识别转换为Word文档时&#xff0c;我们很多时候时会遇到识别内容的一个自然段还没结束就换行的问题&#xff0c;这些就是我们常说的多余换行的问题。为什么会产生这个问题呢&#xff1f;主要是由于OCR返回的识别结果是按图片上的文字换行而换行&#xff0c;而不…...

抖音小店怎么对接达人?如何避免达人白嫖样品?实操经验分享!

我是电商珠珠 很多新手在入驻完抖音小店之后&#xff0c;首先做的就是通过设置店铺活动去跑自然流量&#xff0c;之后再去搞达人流量。 但是部分新手在搞达人流量时所遇到的问题一般都是给达人发消息&#xff0c;达人不搭理&#xff0c;达人白嫖自己的样品&#xff0c;还有就…...

Xocde 升级15 或者 iOS17报错:

错误&#xff1a; Assertion failed: (false && "compact unwind compressed function offset doesnt fit in 24 bits"), function operator(), file Layout.cpp, line 5758. 翻译&#xff1a; 断言失败&#xff1a;&#xff08;false&&“压缩展开…...

Apache配置ssl证书-实现https访问

文章目录 一、准备工作1.1 安装Apache服务器1.2 Apache服务器上已经开启了443端口1.3 Apache服务器上已安装了mod_ssl.so模块1.4 获取SSL证书 二、配置apache2.1 配置apache文件2.2 生效配置文件 一、准备工作 1.1 安装Apache服务器 yum install httpd -y1.2 Apache服务器上已…...

layer 弹框让按钮取消自动获取焦点

success时候调用 “blurLayBtn” //layer 取消按钮自动聚焦 function blurLayBtn(layObj) { //layObj 是当前layer弹框对象$(layObj).find(.layui-layer-btn button).blur(); }...

计算机二级Office真题解析 excel减免税,订单,成绩

第一题 1.将“Excel 减免税.xlsx”文件另存为 excel.xlsx&#xff0c;最后提交该文件&#xff08;1 分&#xff09;。 2.将“对应代码.xlsx”文件中的 sheet1 工作表插入到 excel.xlsx 中&#xff0c;工作 表名重命名为“代码”&#xff08;3 分&#xff09;。 3.在"序号&…...

Spring Cloud Netflix微服务组件-Hystrix

目录 Hystrix的主要功能 传统容错手段 超时机制 应用容错三板斧 超时机制 舱壁隔离 熔断降级 侵入式Command用法 改进版一&#xff1a;ribbon与hystrix组合 改进版二&#xff1a;feign与hystrix组合 Hystrix三态转换图 源码分析 流程图 核心逻辑流程图 核心实现…...

【6】Spring Boot 3 集成组件:knift4j+springdoc+swagger3

目录 【6】Spring Boot 3 集成组件&#xff1a;knift4jspringdocswagger3OpenApi规范SpringFox Swagger3SpringFox工具&#xff08;不推荐&#xff09; Springdoc&#xff08;推荐&#xff09;从SpringFox迁移引入依赖配置jAVA Config 配置扩展配置&#xff1a;spring securit…...

从零搭建微服务架构:Spring Boot与Nacos完美整合

&#x1f38f;&#xff1a;你只管努力&#xff0c;剩下的交给时间 &#x1f3e0; &#xff1a;小破站 从零搭建微服务架构&#xff1a;Spring Boot与Nacos完美整合 前言第一&#xff1a;服务注册与发现第二&#xff1a;配置中心第三&#xff1a;报错问题解决第四&#xff1a;什…...

原来你不会找资源,三个宝藏白嫖书籍网站,阅读改变生活(一)

[无名图书] - 探索无尽的书海 致力于为你打开一扇通往无限知识和无穷想象的大门。从畅销小说到学术专著&#xff0c;书库涵盖了各个领域&#xff0c;满足了各种阅读胃口。无论你是文学爱好者、学术追求者还是正在寻找新奇刺激的冒险者&#xff0c;这都是你不可错过的阅读伴侣。…...

linux rm文件后空间不释放怎么处理

如题&#xff0c;rm文件后&#xff0c;使用df -h看可用空间&#xff0c;并未增加&#xff0c;这是怎么回事&#xff1f;原来&#xff0c;是有进程在访问这个文件&#xff0c;使用“lsof | grep delete”找到进程并kill掉&#xff0c;此时再看可用空间&#xff0c;便增加了。 我…...

vue中el-tree树形组件利用filter和 filterNode方法实现模糊搜索

具体详情可见...

克鲁斯卡尔算法(C++)

目录 克鲁斯卡尔算法 ​编辑代码&#xff1a; 结果&#xff1a; 克鲁斯卡尔算法 克鲁斯卡尔算法是一种用于求解最小生成树的算法。最小生成树是指一棵包含了所有节点的连通图&#xff0c;并且边的权值之和最小。 克鲁斯卡尔算法的基本思想是&#xff0c;每次选择图中最小的…...

【Shell脚本 4】测试用

#!/usr/bin/env bash ​ # --------------------------------------------------------------------------------- # 控制台颜色 BLACK"\033[1;30m" RED"\033[1;31m" GREEN"\033[1;32m" YELLOW"\033[1;33m" BLUE"\033[1;34m"…...

DC电源模块对效率有什么要求?

BOSHIDA DC电源模块对效率有什么要求&#xff1f; DC电源模块是现代科技中非常重要的组成部分&#xff0c;它是将交流电转换为直流电的装置&#xff0c;可以提供稳定的电源给各种设备和系统使用。效率是DC电源模块的一个关键性能指标&#xff0c;直接影响着模块的整体性能和效…...

Linux在线安装MySQL8.0.24安装、MySQL数据备份和恢复

一、 Linux在线安装MySQL8.0.24 如果机器上已经有MySQL5.7版本需要先卸载 首先&#xff0c;需要停止MySQL服务。可以通过以下命令来停止服务&#xff1a; sudo systemctl stop mysqld接下来&#xff0c;我们需要卸载MySQL5.7。可以通过以下命令来卸载&#xff1a; sudo yum…...

【python】OpenCV—Rectangle, Circle, Selective Search(1.2)

文章目录 1 画框画圈1.1 画矩形框1.2 画圆 / 点1.3 椭圆 2 Selective Search3 Resize 1 画框画圈 1.1 画矩形框 # Copy the image img_rgb_copy img_rgb.copy()# Draw a rectangle cv2.rectangle(img_rgb_copy, pt1 (405, 90), pt2 (740, 510),color (255, 0, 0), thickne…...

1.3 VSCode安装与环境配置

进入网址Visual Studio Code - Code Editing. Redefined下载.deb文件&#xff0c;然后打开终端&#xff0c;进入下载文件夹&#xff0c;键入命令 sudo dpkg -i code_1.100.3-1748872405_amd64.deb 在终端键入命令code即启动vscode 需要安装插件列表 1.Chinese简化 2.ros …...

postgresql|数据库|只读用户的创建和删除(备忘)

CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...

Vue 3 + WebSocket 实战:公司通知实时推送功能详解

&#x1f4e2; Vue 3 WebSocket 实战&#xff1a;公司通知实时推送功能详解 &#x1f4cc; 收藏 点赞 关注&#xff0c;项目中要用到推送功能时就不怕找不到了&#xff01; 实时通知是企业系统中常见的功能&#xff0c;比如&#xff1a;管理员发布通知后&#xff0c;所有用户…...

链式法则中 复合函数的推导路径 多变量“信息传递路径”

非常好&#xff0c;我们将之前关于偏导数链式法则中不能“约掉”偏导符号的问题&#xff0c;统一使用 二重复合函数&#xff1a; z f ( u ( x , y ) , v ( x , y ) ) \boxed{z f(u(x,y),\ v(x,y))} zf(u(x,y), v(x,y))​ 来全面说明。我们会展示其全微分形式&#xff08;偏导…...

命令行关闭Windows防火墙

命令行关闭Windows防火墙 引言一、防火墙:被低估的"智能安检员"二、优先尝试!90%问题无需关闭防火墙方案1:程序白名单(解决软件误拦截)方案2:开放特定端口(解决网游/开发端口不通)三、命令行极速关闭方案方法一:PowerShell(推荐Win10/11)​方法二:CMD命令…...

深入解析光敏传感技术:嵌入式仿真平台如何重塑电子工程教学

一、光敏传感技术的物理本质与系统级实现挑战 光敏电阻作为经典的光电传感器件&#xff0c;其工作原理根植于半导体材料的光电导效应。当入射光子能量超过材料带隙宽度时&#xff0c;价带电子受激发跃迁至导带&#xff0c;形成电子-空穴对&#xff0c;导致材料电导率显著提升。…...

32位寻址与64位寻址

32位寻址与64位寻址 32位寻址是什么&#xff1f; 32位寻址是指计算机的CPU、内存或总线系统使用32位二进制数来标识和访问内存中的存储单元&#xff08;地址&#xff09;&#xff0c;其核心含义与能力如下&#xff1a; 1. 核心定义 地址位宽&#xff1a;CPU或内存控制器用32位…...

【题解-洛谷】P10480 可达性统计

题目&#xff1a;P10480 可达性统计 题目描述 给定一张 N N N 个点 M M M 条边的有向无环图&#xff0c;分别统计从每个点出发能够到达的点的数量。 输入格式 第一行两个整数 N , M N,M N,M&#xff0c;接下来 M M M 行每行两个整数 x , y x,y x,y&#xff0c;表示从 …...

第22节 Node.js JXcore 打包

Node.js是一个开放源代码、跨平台的、用于服务器端和网络应用的运行环境。 JXcore是一个支持多线程的 Node.js 发行版本&#xff0c;基本不需要对你现有的代码做任何改动就可以直接线程安全地以多线程运行。 本文主要介绍JXcore的打包功能。 JXcore 安装 下载JXcore安装包&a…...

ubuntu清理垃圾

windows和ubuntu 双系统&#xff0c;ubuntu 150GB&#xff0c;开发用&#xff0c;基本不装太多软件。但是磁盘基本用完。 1、查看home目录 sudo du -h -d 1 $HOME | grep -v K 上面的命令查看$HOME一级目录大小&#xff0c;发现 .cache 有26GB&#xff0c;.local 有几个GB&am…...