vue项目pdf文件的预览

1.下载
您可以在以下网址下载pdfjsLib:https://github.com/mozilla/pdf.js
pdfjsLib是一个开源项目,您可以在GitHub上找到其源代码和相关资源。
2.放置文件位置
在这里插入图片描述
3.进入
在index.html引入

<script src="<%= BASE_URL %>static/pdfjs-dist/build/pdf.js"></script>

4.获取pdf文件的信息并转换为链接

<div class="createModel"><pdf-viewer :url="pdfUrl" ref="pdf" /></div>
methods: {// 初始化数据initDate () {this.getPDFURL()},async getPDFURL () {if (this.fileObj.id) {try {const data = await uploadApi.getPDF(this.fileObj.id)const blob = new Blob([data]);this.pdfUrl = window.URL.createObjectURL(blob)this.$nextTick(() => {this.$refs.pdf.init()})} catch (error) {console.log(error)this.clearData()}}},clearData () {if (this.pdfUrl) {window.URL.revokeObjectURL(this.pdfUrl)}this.pdfUrl = ''this.$nextTick(() => {this.$refs.pdf?.destroyedData()})}},beforeDestroy () {this.clearData()},

5.在PdfViewer.vue组件中

methods: {init () {this.renderPDF();},async renderPDF () {if (!this.url) returnlet containerWidth = document.querySelector('.pdf-container').offsetWidththis.scale = containerWidth / 594const pdf = await pdfjsLib.getDocument(this.url).promise;console.log('pdf', pdf)this.numPages = pdf.numPages;this.$nextTick(async () => {for (let i = 1; i <= this.numPages; i++) {const canvasId = 'pdfCanvas-' + i;const canvasEl = this.$refs[canvasId][0];this.canvasEls.push(canvasEl);const page = await pdf.getPage(i);const viewport = page.getViewport({ scale: this.scale });canvasEl.height = viewport.height;canvasEl.width = viewport.width;const canvasContext = canvasEl.getContext('2d');await page.render({canvasContext,viewport,}).promise;}})},destroyedData () {this.numPages = 0this.canvasEls = []}},

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C/C++输出硬币翻转 2021年6月电子学会青少年软件编程(C/C++)等级考试一级真题答案解析

目录 C/C硬币翻转 一、题目要求 1、编程实现 2、输入输出 二、算法分析 三、程序编写 四、程序说明 五、运行结果 六、考点分析 C/C硬币翻转 2021年6月 C/C编程等级考试一级编程题 一、题目要求 1、编程实现 假设有N个硬币(N为不大于5000的正整数)&#xff0c;从1…

ChatGPT 宕机?OpenAI 将中断归咎于 DDoS 攻击

您的 ChatGPT 已关闭吗&#xff1f;您是否遇到 ChatGPT 问题&#xff0c;例如连接问题或遇到“长响应时出现网络错误”&#xff1f;– ChatGPT 遭受了一系列 DDoS 攻击&#xff0c;显然是由匿名苏丹组织策划的。 OpenAI 的 ChatGPT 是一款流行的人工智能聊天机器人&#xff0c;…

工商银行卡安全码怎么看

工商银行的安全码&#xff0c;作为一项至关重要的安全措施&#xff0c;旨在保护用户的银行账户和交易安全。为了查看工商银行的安全码用户需要按照以下步骤操作&#xff1a; 首先&#xff0c;用户需要使用电脑或手机访问工商银行的网上银行平台。在平台首页&#xff0c;用户需要…

2023年A股借壳上市研究报告

第一章 借壳上市概况 1.1 定义 借壳上市作为一种独特的资本市场操作手法&#xff0c;历来是企业拓展融资渠道和实现市场战略目标的重要途径。具体来说&#xff0c;借壳上市可分为狭义与广义两种模式。在狭义的定义下&#xff0c;借壳上市是指一家已上市的公司的控股母公司&am…

JVM虚拟机-虚拟机性能监控、故障处理工具

1基础故障处理工具 jps&#xff08;JVM Process Status Tool&#xff09;是&#xff1a;虚拟机进程状况工具 作用&#xff1a;可以列出正在运行的虚拟机进程&#xff0c;并显示虚拟机执行主类&#xff08;Main Class&#xff0c;main()函数所在的类&#xff09;名称以及这些进…

基于遗传算法优化的直流电机PID控制器设计

PID控制器是工业控制中常用的一种控制算法&#xff0c;通过不断调节比例、积分和微分部分来实现对系统的稳定控制。然而&#xff0c;在一些复杂系统中&#xff0c;传统的PID参数调节方法可能存在局限性。本文将介绍一种基于遗传算法优化的直流电机PID控制器设计方法&#xff0c…

CSS3 多媒体查询、网格布局

一、CSS3多媒体查询&#xff1a; CSS3 多媒体查询继承了CSS2多媒体类型的所有思想&#xff0c;取代了查找设备的类型。CSS3根据设置自适应显示。 多媒体查询语法&#xff1a; media not|only mediatype and (expressions) { CSS 代码...; } not: not是用来排除掉某些特定…

系列二十二、idea Live Templates

一、idea Live Templates 1.1、Java Group 1.1.1、fast fast 快速在类上添加注解Data AllArgsConstructor NoArgsConstructor Accessors(chain true) ToString(callSuper true) 1.1.2、getThreadName getThreadName快速获取当前线程的名字Thread.currentThread().getName…

【Git】gui图形化界面的使用、ssh协议以及idea集成Git

目录 gui图形化界面的使用 介绍 特点 gui图形的使用 ssh协议 介绍 步骤及概念 ssh协议的使用 配置公钥 idea集成Git idea配置git IDEA安装gitee IDEA中登入Git ​编辑 项目分享 克隆分享的项目 ​编辑 ​编辑 idea上传远程 gui图形化界面的使用 介绍 GUI&#xff08…

Docker进阶——再次认识docker的概念 Docker的结构 Docker镜像结构 镜像的构建方式

前言 在微服务大量应用的互联网时代&#xff0c;经常能看到docker的身影。作为docker的爱好者&#xff08;在服务器安装MySQL&#xff0c;Redis。。。我用的都是docker&#xff09;&#xff0c;我也会持续深入学习和认识docker。 本篇博客再次介绍docker的基本概念&#xff0…

广州华锐互动:VR互动实训内容编辑器助力教育创新升级

随着科技的飞速发展&#xff0c;教育领域也正在经历一场深刻的变革。其中&#xff0c;虚拟现实(VR)技术为教学活动提供了前所未有的便利和可能性。在诸多的VR应用中&#xff0c;VR互动实训内容编辑器无疑是最具潜力和创新性的一种。广州华锐互动开发的这款编辑器以其独特的功能…

【星海出品】flask 与docker

import os from flask import Flask, request from flask import Response, make_response, jsonify import cv2 import base64 import io import uuid from main import eye ​ app Flask(__name__)​ app.route(/, methods[GET, POST]) # 添加路由blend def upload_file():…

ZYNQ_project:key_breath

[Synth 8-327] inferring latch for variable led_breath_reg ["C:/Users/warrior/Desktop/ZYNQ/pl/key_breath/rtl/led_breath.v":66] 因为在组合逻辑中&#xff0c;用了非阻塞赋值的方式赋值信号。 组合逻辑自己给自己赋值会产生组合回环&#xff0c;输出不稳定。 …

git and svn 行尾风格配置强制为lf

git CLI配置&#xff1a; // 提交时转换为LF&#xff0c;检出时转换为CRLF git config --global core.autocrlf true // 提交时转换为LF&#xff0c;检出时不转换 git config --global core.autocrlf input // 提交检出均不转换 git config --global core.autocrlf f…

redis数据倾斜如何解决

Redis数据倾斜主要是由于数据访问热点导致的&#xff0c;通常在执行事务操作或范围查询时发生。这会导致大量数据集中在某个实例上&#xff0c;使得集群负载不均衡。以下是一些解决Redis数据倾斜的方法&#xff1a; 避免在同一个键值对上保存过多的数据。可以将大的键值对拆分…

c#装饰器模式详解

基础介绍&#xff1a; 动态地给一个对象添加一些额外的职责。适用于需要扩展一个类的功能&#xff0c;或给一个类添加多个变化的情况。 装饰器&#xff0c;顾名思义就是在原有基础上添加一些功能。 大家都只知道如果想单纯的给原有类增加一些功能&#xff0c;可以直接继续该类生…

C# 同步异步大白话

同步异步大白话 背景 任务异步编程模型&#xff08;TAP&#xff09;提供了对异步代码的抽象。您可以像往常一样&#xff0c;将代码编写为一系列语句。您可以阅读该代码&#xff0c;就好像每条语句都在下一条语句开始之前完成一样。编译器执行许多转换&#xff0c;因为其中一些…

VulnHub Nullbyte

一、信息收集 1.nmap扫描 arp-scan -l扫描内网存活主机 ┌──(root&#x1f480;kali)-[~/桌面] └─# nmap -sS -A -p- 192.168.103.201/24 -sS 半扫描 -A 扫描详细信息 -p- 扫描全端口发现开放了80、111、777、50978端口 且发现777端口开放了ssh服务&#xff0c;说明他把…

十个使用Spring Cloud和Java创建微服务的实践案例

在使用Java构建微服务时&#xff0c;许多人认为只要学习一些微服务设计模式就足够了&#xff0c;比如CQRS、SAGA或每个微服务一个数据库。虽然这是正确的&#xff0c;但同时学习一些通用的最佳实践也是很有意义的。本文分享一些最佳实践。 1 设计模块化的微服务 微服务应该专…

计算机技术专业CSIT883系统分析与项目管理介绍

文章目录 前言一、学科学习成果二、使用步骤三、最低出勤要求四、讲座时间表五、项目管理 前言 本课程介绍了信息系统开发中的技术和技术&#xff0c;以及与管理信息技术项目的任务相关的方法和过程。 它研究了系统分析师、客户和用户在系统开发生命周期中的互补角色。 它涵盖…