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

news2024/11/14 14:41:31

文章目录

  • 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.coloradmin.cn/o/2237759.html

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

相关文章

MFC图形函数学习06——画椭圆弧线函数

绘制椭圆弧线函数是MFC基本绘图函数&#xff0c;这个函数需要的参数比较多&#xff0c;共四对坐标点。前两对坐标点确定椭圆的位置与大小&#xff0c;后两对坐标确定椭圆弧线的起点与终点。 一、绘制椭圆弧线函数 原型&#xff1a;BOOL Arc(int x1,int y1,int x2,int y2…

新版 idea 编写 idea 插件时,启动出现 ClassNotFound

IntelliJ IDEA 2024.1.6 (Ultimate Edition) Build #IU-241.19072.14, built on August 8, 2024 Licensed to Sophia Tout Subscription is active until June 29, 2025. For educational use only. Runtime version: 17.0.111-b1207.30 amd64 Kotlin: 241.19072.14-IJ 新版本…

信息安全工程师(83)Windows操作系统安全分析与防护

一、Windows操作系统安全分析 系统漏洞&#xff1a; Windows操作系统由于其复杂性和广泛使用&#xff0c;可能存在一些已知或未知的漏洞。这些漏洞可能会被黑客利用&#xff0c;进行恶意攻击。微软会定期发布系统更新和补丁&#xff0c;以修复这些漏洞&#xff0c;提高系统的安…

【嵌入式开发——ARM】1ARM架构

嵌入式领域&#xff0c;使用ARM架构的芯片公司可不占少数吧&#xff0c;intel的x86架构主要占据PC、服务器市场&#xff0c;ARM架构主要占据移动市场。x86架构和ARM架构不同的主要原因&#xff0c;是背后使用的计算机指令集不同。计算机有自己的语言系统&#xff08;汇编&#…

31-自定义地图:分层地图

利用自定义地图中的级别&#xff0c;可以让多个人同时在一张地图上工作。它还允许您在仿真过程中使用Python API在地图上加载和卸载层&#xff0c;就像分层的CARLA地图一样(layered CARLA maps)。 本指南将解释如何添加新级别&#xff0c;如何向级别添加资产&#xff0c;以…

操作系统-磁盘

文章目录 磁盘的结构一、磁盘的物理结构二、磁盘的逻辑结构 磁盘的调度算法磁盘时间算法先来先服务&#xff08;FCFS - First-Come, First-Served&#xff09;最短寻道时间优先&#xff08;SSTF - Shortest Seek Time First&#xff09;扫描算法&#xff08;SCAN&#xff0c;也…

【Linux】【信号操作】汇总整理

信号&#xff08;Signals&#xff09;是操作系统中用于通知进程发生特定事件的一种机制。信号可以由软件或硬件触发&#xff0c;并且可以被进程捕获和处理。以下是信号的相关概念、常见信号列表、信号处理以及相关API的汇总整理。 信号概述 信号是操作系统向进程发出的通知&am…

必备的计算机软件专业资料汇总,包括:计算机专业实习报告,计算机毕业设计成品(含源码和论文1900套)

大学期间必备的计算机软件专业资料汇总&#xff0c;包括&#xff1a;计算机专业实习报告&#xff08;58篇&#xff09;、计算机毕业设计成品&#xff08;含源码和论文&#xff0c;1900多套&#xff0c;包括C语言/PHP/VB/java/JSP/Andorid/Python/微信小程序等&#xff09;、HTM…

业务模块部署

一、部署前端 1.1 window部署 下载业务模块前端包。 &#xff08;此包为耐威迪公司发布&#xff0c;请联系耐威迪客服或售后获得&#xff09; 包名为&#xff1a;业务-xxxx-business &#xff08;注&#xff1a;xxxx为发布版本号&#xff09; 此文件部署位置为&#xff1a;……

使用kalibr_calibration标定相机(realsense)和imu(h7min)

vslam-evaluation/VINS/Installation documentation/4.IMU和相机联合标定kalibr_calibration.md at master DroidAITech/vslam-evaluation GitHub 目录 1.kalibr安装 1.1安装依赖项 1.2创建工作空间 1.3下载kalibr并编译 1.4设置环境变量 2.准备标定板 3.配置驱动和打…

Java | Leetcode Java题解之第551题学生出勤记录I

题目&#xff1a; 题解&#xff1a; class Solution {public boolean checkRecord(String s) {int absents 0, lates 0;int n s.length();for (int i 0; i < n; i) {char c s.charAt(i);if (c A) {absents;if (absents > 2) {return false;}}if (c L) {lates;if …

MATLAB课程:AI工具辅助编程——MATLAB+LLMs

给出一些可能有用的方法辅助大家写代码。 方法一&#xff1a;MATLAB软件LLM (不太懂配置的同学们为了省事可以主要用这个方法) 方法一特别针对本门MATLAB教学课程&#xff0c;给出一种辅助ai工具的操作指南。MATLAB中可以安装MatGPT插件&#xff0c;该插件通过调用ChatGPT的API…

腾讯混元3D-1.0:文本到三维和图像到三维生成的统一框架

虽然三维生成模型极大地改进了艺术家的工作流程&#xff0c;但现有的三维生成扩散模型存在生成速度慢、泛化能力差的问题。 为了解决这个问题&#xff0c;我们提出了一种名为 "Hunyuan3D-1.0 "的两阶段方法&#xff0c;包括精简版和标准版&#xff0c;均支持文本和图…

现代Web开发:Vue 3 组件化开发实战

&#x1f493; 博客主页&#xff1a;瑕疵的CSDN主页 &#x1f4dd; Gitee主页&#xff1a;瑕疵的gitee主页 ⏩ 文章专栏&#xff1a;《热点资讯》 现代Web开发&#xff1a;Vue 3 组件化开发实战 现代Web开发&#xff1a;Vue 3 组件化开发实战 现代Web开发&#xff1a;Vue 3 组…

VBA08-if语句

一、单行 If 语句 If x > 10 Then MsgBox "x is greater than 10"二、多行 If...Then...End If 语句 If x > 10 ThenMsgBox "x is greater than 10"y x 5 End If 三、If...Then...Else 语句 If condition Then 当条件为真时执行的代码块stateme…

深度学习中的感受野:从基础概念到多层次特征提取

在深度学习&#xff0c;特别是计算机视觉任务中&#xff0c;感受野&#xff08;Receptive Field&#xff09;是一个至关重要的概念。它指的是在神经网络中某一层的神经元在输入图像上“看到”的区域大小。感受野的大小影响了网络能捕捉的特征层级&#xff0c;从而决定了它的特征…

Jekins篇(搭建/安装/配置)

目录 一、环境准备 1. Jenkins安装和持续集成环境配置 2. 服务器列表 3. 安装环境 Jekins 环境 4. JDK 环境 5. Maven环境 6. Git环境 方法一&#xff1a;yum安装 二、JenKins 安装 1. JenKins 访问 2. jenkins 初始化配置 三、Jenkins 配置 1. 镜像配置 四、Mave…

ElasticSearch备考 -- 集群配置常见问题

一、集群开启xpack安全配置后无法启动 在配置文件中增加 xpack.security.enabled: true 后无法启动&#xff0c;日志中提示如下 Transport SSL must be enabled if security is enabled. Please set [xpack.security.transport.ssl.enabled] to [true] or disable security b…

C++ : STL容器(适配器)之stack、queue剖析

STL容器适配器之stack、queue剖析 一、stack、queue的接口&#xff08;一&#xff09;stack 接口说明&#xff08;二&#xff09;queue 接口说明 二、stack、queue的模拟实现&#xff08;一&#xff09;stack、queue是容器适配器stack、queue底层默认容器--deque1、deque概念及…

排序算法.

排序算法是最常用的一种算法.它解决的主要问题是在一定的时间复杂度和空间复杂度的条件下,对n个数按照一定的顺序进行排序.排序算法主要分为四大类,即插入类,交换类,选择类和归并类,不同的排序算法的时间复杂程度和空间复杂程度差别很大. 排序算法主要有以下几种: 1.插入类排…