Vue2中使用firefox的pdfjs进行文件文件流预览

文章目录

  • 1.使用场景
  • 2. 使用方式
    • 1. npm 包下载,[点击查看](https://www.npmjs.com/package/pdfjs-dist)
    • 2. 官网下载
      • 1. 放到public文件夹下面
      • 2. 官网下载地址[点我,进入官网](https://github.com/mozilla/pdf.js/tags?after=v3.3.122)
    • 3. 代码演示
    • 4. 图片预览
    • 5. 如果遇到跨域或者application/octet-stream等问题

1.使用场景

pdf链接或者pdf文件流的预览

2. 使用方式

1. npm 包下载,点击查看

npm i pdfjs-dist // 此种方式,不过多介绍,网上都是

2. 官网下载

1. 放到public文件夹下面

在这里插入图片描述

2. 官网下载地址点我,进入官网

由于是github可能有些网络进不去,可以通过网盘下载
链接: https://pan.baidu.com/s/1cG06QTtWwTSTSzOPWy5NQg?pwd=rcnm 提取码: rcnm

3. 代码演示

<template><div class="pdf-preview"><el-row><el-col :span="24"><el-button @click="handleChooseLocalFile" type="primary">选择本地文件</el-button></el-col></el-row><iframe class="pdf-iframe" :src="previewURL" width="100%" height="800px" v-if="previewURL"></iframe></div>
</template>
<script>
export default {name: "pdfPreview",data() {return {// public 下面的路径pdfJsViewer: "/pdfjs-4.8.69/web/viewer.html",fileUrl: "/pdfjs-4.8.69/web/compressed.tracemonkey-pldi-09.pdf",};},computed: {previewURL() {return this.fileUrl ? `${this.pdfJsViewer}?file=${encodeURIComponent(this.fileUrl)}` : "";},},methods: {handleChooseLocalFile() {let input = document.createElement("input");input.type = "file";input.accept = ".pdf";input.multiple = false;input.onchange = (e) => {let file = e.target.files[0];if (file) {this.fileUrl = URL.createObjectURL(file);}};input.click();input.remove();},},
};
</script><style scoped lang="scss">
.inner-tool {display: flex;flex-direction: column;
}
.pdf-preview {flex: 1;
}
.pdf-iframe {margin-top: 20px;height: calc(100vh - 150px);
}
</style>

4. 图片预览

在这里插入图片描述

5. 如果遇到跨域或者application/octet-stream等问题

参考大佬 平凡的人类 空白

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

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

相关文章

vue3+vite 前端打包不缓存配置

最近遇到前端部署后浏览器得清缓存才能出现最新页面效果得问题 所以…按以下方式配置完打包就没啥问题了&#xff0c;原理很简单就是加个时间戳 /* eslint-disable no-undef */ import {defineConfig, loadEnv} from vite import path from path import createVitePlugins from…

RS485/RS422保护电路

由于GJB 151B没有雷击和浪涌测试要求&#xff0c;故不需要防雷器件。TVS管使用SMB6.5CA&#xff0c;共模电感选择LCHWCM-453228-510YT01&#xff0c;详细设计电路如下图所示&#xff0c;此设计可同时满足GJB 151B和DO 160G的标准。注意SMB封装的TVS管是600W&#xff0c;SMA封装…

抖音电商发布双11数据:275个品牌通过直播带货实现成交额过亿元

11月12日&#xff0c;抖音电商发布2024“抖音商城双11好物节”数据&#xff0c;呈现双11期间平台商家经营情况。 数据显示&#xff0c;大促期间&#xff0c;众多商家在抖音电商迎来生意增长。10月8日至11月11日&#xff0c;超3.3万个品牌成交额同比翻倍&#xff0c;近1.7万个品…

CKA认证 | Day1 k8s核心概念与集群搭建

第一章 Kubernetes 核心概念 1、主流的容器集群管理系统 容器编排系统&#xff1a; KubernetesSwarmMesos Marathon 2、Kubernetes介绍 Kubernetes是Google在2014年开源的一个容器集群管理系统&#xff0c;Kubernetes简称K8s。 Kubernetes用于容器化应用程序的部署&#x…

实验室集群服务器常用命令-Linux

1. 查看磁盘空间 df -h2. 查看当前文件夹下所有文件 ls查看当前文件夹下所有文件&#xff08;包括隐藏文件 ls -a3. 服务器内存相关命令 a. 查看服务器剩余内存 free -hb. 查看占用内存最大的10个进程 ps -aux | sort -k4nr | head -n 104. 批量kill进程 a. --kill某个用…

《大模型应用开发极简入门》笔记

推荐序 可略过不看。 初识GPT-4和ChatGPT LLM概述 NLP的目标是让计算机能够处理自然语言文本&#xff0c;涉及诸多任务&#xff1a; 文本分类&#xff1a;将输入文本归为预定义的类别。自动翻译&#xff1a;将文本从一种语言自动翻译成另一种语言&#xff0c;包括程序语言。…

在AutoDL上部署一个自定义的Python环境并在pycharm上使用

#AutoDL #GPU #租显卡 如何在AutoDL上部署一个自定义的Python环境 下面将会给出如何在AutoDL部署一个自定义的Python环境的详细步骤&#xff0c;希望可以帮助到同样对于显卡具有需求的同学。 注册账号 首先登陆AutoDL官网&#xff1a;https://www.gpuhub.com/register 链接…

C++ 面试问题集合

文章目录 设计模式单例 排序算法查找算法二分查找 设计模式 单例 #include <iostream> #include <string> #include <memory> #include <mutex> #include <thread>using namespace std;class SingleTon{ protected://外部不可直接操作SingleTo…

高级AI记录笔记(二)

学习位置 B站位置&#xff1a;红豆丨泥 UE AI 教程原作者Youtube位置&#xff1a;https://youtu.be/-t3PbGRazKg?siRVoaBr4476k88gct素材自备 提前将动画素材准备好 枪的武器插槽位置调整好 动画蓝图基本没什么变化 准备武器 在AI的接口蓝图中添加两个函数一个是装备武…

小型kv数据库rocksdb配合grpc实现网络访问

rocksdb相对来说比leveldb多了许多特性&#xff0c;但是对使用来说比levedb高了一大截。 rocksdb的代码在编译时需要有rocksdb服务端环境才能编译&#xff0c;windows上需要先下载vs2019编译dll后才能开始写代码。 这里不考虑windows了&#xff0c;直接使用docker环境来用 一…

汽车共享管理:SpringBoot技术的最佳实践

摘要 随着信息技术在管理上越来越深入而广泛的应用&#xff0c;管理信息系统的实施在技术上已逐步成熟。本文介绍了共享汽车管理系统的开发全过程。通过分析共享汽车管理系统管理的不足&#xff0c;创建了一个计算机管理共享汽车管理系统的方案。文章介绍了共享汽车管理系统的系…

从0开始学PHP面向对象内容之(常用魔术方法)

一、什么是魔术方法 PHP中的魔术方法是以__两个下划线开头的方法&#xff0c;这些方法提供了一种机制&#xff0c;可以在类的生命周期中拦截某些事件或者进行一些操作 二、魔术方法有哪些 一、__construct()&&__destruct() __construct()构造函数&#xff0c;__des…

蔚来Android面试题及参考答案(3万字长文)

说一说 MVP 架构,MVVM 架构 MVP(Model - View - Presenter)架构: Model:它主要负责数据的获取和存储,例如从数据库、网络或者其他数据源获取数据。模型层是独立于视图层的,它不关心数据是如何展示的,只专注于数据本身的操作。比如一个新闻类应用,模型层就负责从服务器…

PNG图片批量压缩exe工具+功能纯净+不改变原始尺寸

小编最近有一篇png图片要批量压缩&#xff0c;大小都在5MB之上&#xff0c;在网上找了半天要么就是有广告&#xff0c;要么就是有毒&#xff0c;要么就是功能复杂&#xff0c;整的我心烦意乱。 于是我自己用python写了一个纯净工具&#xff0c;只能压缩png图片&#xff0c;没任…

【论文阅读】小样本学习相关研究

相关文献 Generalizing from a Few Examples: A Survey on Few-Shot Learning Author: YAQING WANG、QUANMING YAO、JAMES T. KWOK、LIONEL M. NIAbstract: Artificial intelligence succeeds in data-intensive applications, but it lacks the ability of learning from a …

【架构论文-1】面向服务架构(SOA)

【摘要】 本文以我参加公司的“生产线数字孪生”项目为例&#xff0c;论述了“面向服务架构设计及其应用”。该项目的目标是构建某车企的数字孪生平台&#xff0c;在虚拟场景中能够仿真还原真实产线的动作和节拍&#xff0c;实现虚实联动&#xff0c;从而提前规避问题&#xff…

常见的排序算法及分类对比

虽然在竞赛和编程语言中用到的排序算法主要是时间复杂度为 O ( n log ⁡ n ) O(n \log n) O(nlogn) 的高效算法,但作为算法学习,我们要从简单到复杂,认识常见的排序算法,并理解其算法思想。本文列出几乎所有的排序算法并进行分类对比。 排序算法总表 以下是一个对比表格…

Kafka-broker处理producer请求-leader篇

一、上下文 《Kafka-生产者源码分析》博客中我们了解了Kafka是如何生产数据的&#xff0c;《Kafka-broker粗粒度启动流程》博客中我们了解了KafkaApis中有各种api和对应处理逻辑&#xff0c;其中PRODUCE请求对应了处理produce请求的逻辑&#xff0c;下面我们跟着源码来看下处理…

mysql占用内存过大问题排查

如果 MySQL 占用内存过高&#xff0c;可以按照以下步骤进行排查&#xff1a; 一、检查 MySQL 配置参数 查看 innodb_buffer_pool_size&#xff1a; 这个参数决定了 InnoDB 存储引擎缓冲池的大小&#xff0c;它会占用大量内存。如果设置得过大&#xff0c;可能导致内存占用过高…

pulsar bookies 磁盘资源无法释放问题排查

查询bookie节点状态 bin/bookkeeper shell bookieinfo 报错如下&#xff1a; Error during flush Nov 11 16:03:05 pulsar-192-0-20-118 pulsar[10500]: java.io.IOException: java.lang.RuntimeException: java.io.FileNotFoundException: /data/bookkeeper/ledgers/current/6…