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

PDF.js的使用及其跨域问题解决

news 2025/12/26 18:31:17

       

目录

一、PDF.js 简介

二、使用配置和步骤

1.引入PDF.js

2.加载PDF文件

3.渲染PDF页面

三、在Vue中使用PDF.js示例

1.安装PDF.js

2.在Vue组件中使用

四、在原生js中使用PDF.js示例

1.加载PDF文件并渲染页面

五、解决跨域问题

1.服务器配置

2.使用代理服务器

下面介绍一下怎么使用pdf.js来实现预览pdf文件，并在结尾提供使用过程中遇到跨越问题的解决方案。

一、PDF.js 简介

        PDF.js 是一个由 Mozilla 开发的开源 JavaScript 库，用于在浏览器中显示 PDF 文件，无需插件支持。它可以将 PDF 文件解析为可在浏览器中渲染的页面，实现 PDF 文件的预览功能。

二、使用配置和步骤

1.引入PDF.js

        可以从 PDF.js 的官方网站（PDF.js - Home）下载最新版本的 PDF.js 文件，或者通过 CDN 引入。

        例如：

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.14.305/pdf.min.js"></script>

2.加载PDF文件

        使用 PDF.js 的 getDocument 方法加载 PDF 文件，可以通过网络 URL 或本地文件路径加载。

        例如：

pdfjsLib.getDocument('your-pdf-file-url.pdf').promise.then(function(pdf) {// 加载成功后的处理
});

3.渲染PDF页面

        加载成功后，可以使用 getPage 方法获取 PDF 文件的特定页面，并使用 render 方法将其渲染到 HTML 页面上。

        例如：

pdf.getPage(pageNumber).then(function(page) {const viewport = page.getViewport({ scale: 1.5 });const canvas = document.createElement('canvas');const context = canvas.getContext('2d');canvas.width = viewport.width;canvas.height = viewport.height;const renderContext = {canvasContext: context,viewport: viewport};page.render(renderContext);
});

三、在Vue中使用PDF.js示例

1.安装PDF.js

npm install pdfjs-dist

2.在Vue组件中使用

        在 Vue 组件的方法中，可以使用 PDF.js 的方法加载和渲染 PDF 文件。

        例如：

<template><div><canvas ref="pdfCanvas"></canvas></div>
</template><script>
import pdfjsLib from 'pdfjs-dist';export default {data() {return {pdf: null};},mounted() {this.loadPdf('your-pdf-file-url.pdf');},methods: {loadPdf(url) {pdfjsLib.getDocument(url).promise.then(pdf => {this.pdf = pdf;this.renderPage(1);});},renderPage(pageNumber) {this.pdf.getPage(pageNumber).then(page => {const viewport = page.getViewport({ scale: 1.5 });const canvas = this.$refs.pdfCanvas;const context = canvas.getContext('2d');canvas.width = viewport.width;canvas.height = viewport.height;const renderContext = {canvasContext: context,viewport: viewport};page.render(renderContext);});}}
};
</script>

四、在原生js中使用PDF.js示例

1.加载PDF文件并渲染页面

        与上述步骤类似，可以在纯 JavaScript 中使用 PDF.js 加载和渲染 PDF 文件。

        例如：

<!DOCTYPE html>
<html><head><title>PDF Preview with PDF.js</title>
</head><body><canvas id="pdfCanvas"></canvas><script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.14.305/pdf.min.js"></script><script>const canvas = document.getElementById('pdfCanvas');pdfjsLib.getDocument('your-pdf-file-url.pdf').promise.then(pdf => {pdf.getPage(1).then(page => {const viewport = page.getViewport({ scale: 1.5 });const context = canvas.getContext('2d');canvas.width = viewport.width;canvas.height = viewport.height;const renderContext = {canvasContext: context,viewport: viewport};page.render(renderContext);});});</script>
</body></html>

五、解决跨域问题

在使用 PDF.js 时，如果遇到跨域问题，可以尝试以下方法解决：

1.服务器配置

        如果 PDF 文件是从服务器加载的，可以在服务器端配置 CORS（跨域资源共享），允许来自不同域的请求访问 PDF 文件。

        例如，在服务器端设置响应头，允许跨域访问：

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Headers: Content-Type

2.使用代理服务器

        如果无法在服务器端配置 CORS，可以考虑使用代理服务器来加载 PDF 文件。代理服务器可以将 PDF 文件的请求转发到原始服务器，并将响应返回给客户端，从而避免跨域问题。

        例如，在前端代码中使用代理服务器的 URL 来加载 PDF 文件：

pdfjsLib.getDocument('your-proxy-server-url/your-pdf-file-url.pdf').promise.then(function(pdf) {// 加载成功后的处理
});

相关文章：

PDF.js的使用及其跨域问题解决

目录 一、PDF.js 简介 二、使用配置和步骤 1.引入PDF.js 2.加载PDF文件 3.渲染PDF页面 三、在Vue中使用PDF.js示例 1.安装PDF.js 2.在Vue组件中使用 四、在原生js中使用PDF.js示例 1.加载PDF文件并渲染页面 五、解决跨域问题 1.服务器配置 2.使用代理服务器 下面介…...

编程日记 2024/10/18 14:45:12

Linux Redis查询key与移除日常操作

维护老项目Express node 编写的后端程序、有这么一个方法、没有设置redis过期时间&#xff08;建议设置过期时间&#xff0c;毕竟登录生产服务器并不是每个人都有权限登录的&#xff01;&#xff01;&#xff01;&#xff09;。如果变动只能通过登录生产服务器、手动修改… 于…...

编程日记 2024/10/18 14:44:11

开源两个月,antflow后端项目全网获近100星

从六月初开源,转眼间AntFlow已经开源将近四个月了(前端比后端早了大约2个月,后端于8.18开源).(其实准备是重构以前开源版本.前年的时候我们已经将Vue2版的流程设计器开源了.后来由于疫情原因,没有再继续持续开发.)后来有一天再打开仓库的时候,发现虽然很久没有更新了,但是不断有…...

编程日记 2024/10/18 14:43:10

设计模式——工厂方法模式（2）抽象工厂模式（3）

一、写在前面 创建型模式 单例模式工厂方法模式抽象工厂模式原型模式建造者模式 结构型模式行为型模式工厂方法模式和抽象工厂模式都属于工厂模式&#xff0c;所以放在一起介绍了 二、介绍 为什么要工厂模式&#xff1f;工厂就像一个黑盒一样&#xff0c;所以用工厂模式来创…...

编程日记 2024/10/18 14:41:07

简单聊聊System V下的IPC + 内核是如何管理该IPC

文章目录 前言&#xff1a;&#x1f383;消息队列&#xff1a;1. **消息队列的基本概念**2. **消息队列的特点**3. **常见的消息队列操作&#xff08;Linux IPC&#xff09;****1) msgget&#xff1a;创建或获取消息队列****2) msgsnd&#xff1a;发送消息****3) msgrcv&#x…...

编程日记 2024/10/18 14:40:06

【WRF工具】服务器上安装convert_geotiff

【WRF工具】服务器上安装convert_geotiff convert_geotiff简介方法1&#xff1a;下载安装包后下载convert_geotiff依赖库安装库1&#xff1a;libtiff库2&#xff1a;sqlite库3&#xff1a;curl库4&#xff1a;projcmake更新&#xff08;可选&#xff09;库5&#xff1a;geotiff…...

编程日记 2024/10/18 14:39:04

RPC通讯基础原理

1.RPC&#xff08;Remote Procedure Call&#xff09;概述 RPC是一种通过网络从远程计算机上调用程序的技术&#xff0c;使得构建分布式计算更加容易&#xff0c;在提供强大的远程调用能力时不损失本地调用的语义简洁性&#xff0c;提供一种透明调用机制&#xff0c;让使用者不…...

编程日记 2024/10/18 14:38:03

JavaScript 第18章：安全性

在JavaScript开发中&#xff0c;确保应用的安全性是非常重要的。下面我将根据你提到的几个方面来讲解如何增强Web应用程序的安全性。 XSS&#xff08;跨站脚本&#xff09;攻击防御 示例代码&#xff1a; function escapeHTML(unsafe) {return unsafe.replace(/&/g, &qu…...

编程日记 2024/10/18 14:36:00

基于workbox实现PWA预缓存能力

引言 Service Worker 是一项流行的技术&#xff0c;尽管在许多项目中尚未得到充分利用。基于本次项目首页加载优化的机会&#xff0c;决定尝试使用 Google 出品的 Workbox&#xff0c;以观察其优化效果。 开始 安装 项目使用 Webpack 打包&#xff0c;而 Workbox 提供了 We…...

编程日记 2024/10/18 14:32:57

探索Web3生态系统：社区、协议与参与者的角色

Web3代表着互联网的下一个演变阶段&#xff0c;旨在通过去中心化技术赋予用户更大的控制权和参与感。在这个新兴生态系统中&#xff0c;社区、协议和参与者扮演着不可或缺的角色&#xff0c;共同推动着Web3的建设与发展。 社区的核心作用 在Web3中&#xff0c;社区通过提供反馈…...

编程日记 2024/10/18 14:31:56

无人机电机故障率骤降：创新设计与六西格玛方法论双赢

项目背景 TBR-100是消费级无人机头部企业推出的主打消费级无人机&#xff0c;凭借其出色的续航能力和卓越的操控性&#xff0c;在市场上获得了广泛认可。在产品运行过程&#xff0c;用户反馈电机故障率偏高&#xff0c;尤其是在飞行一段时间后出现电机过热、损坏以及运行不稳定…...

编程日记 2024/10/18 14:30:53

samba禁用时拷贝服务器文件到本地的脚本

Android系统开发一般在ubuntu服务器上&#xff0c;我们办公电脑一般是windows。在将编译出来的模块push到板子上时&#xff0c;一般采用adb push 方式。 有时由于种种原因会出现服务器禁用了samba&#xff0c;导致无法直接用adb push 的情况。 下面介绍用winscp 走ssh 拷贝服…...

编程日记 2024/10/18 14:29:51

C#代码 串口通信晋中A2板，控制直流电机

1&#xff0c;在电脑中给晋中板中下载编译好的程序。 0x39 &#xff1a;开启电机的标识 代码&#xff1a; /********************************************************************************** **** 实验名称&#xff1a;串口通信实验 接线说明&#xff1a; 实验现象&…...

编程日记 2024/10/18 14:27:47

3 机器学习之假设空间

归纳(induction)与演绎(deduction)是科学推理的两大基本手段。前者是从特殊到一般的“泛化”(generalization)过程&#xff0c;即从具体的事实归结出一般性规律&#xff1b;后者则是从一般到特殊的“特化”(specialization)过程&#xff0c;即从基础原理推演出具体状况。例如&a…...

编程日记 2024/10/18 14:26:46

基于STM32的风速风向传感器设计

引言 本项目设计了一个基于STM32的风速和风向传感器系统&#xff0c;能够通过组合使用旋转式风速传感器和电子罗盘&#xff0c;实时测量风速和风向&#xff0c;并将数据通过显示屏或无线模块发送给用户。该系统适用于气象监测、环境监控、农业自动化等场景&#xff0c;具有准确…...

编程日记 2024/10/18 14:24:44

域名申请.

操作场景 Internet上有成千上万台主机&#xff0c;每一台主机都对应一个唯一的IP地址。IP地址因不具备实际意义&#xff0c;非常难于记忆&#xff0c;于是就产生了域名。 域名&#xff08;Domain Name&#xff09;是一串用点分隔的字符串组成的名称&#xff08;例如huaweiclo…...

编程日记 2024/10/18 14:23:43

mysql5.7与mysql8.0身份认证插件的区别

MySQL 5.7 和 MySQL 8.0 在身份认证插件方面有一些重要的区别。这些变化主要集中在默认的身份验证插件、密码管理和安全性增强上。 默认身份验证插件 MySQL 5.7 默认插件: mysql_native_password mysql_native_password 是 MySQL 5.7 及更早版本中的默认身份验证插件。它使用…...

编程日记 2024/10/18 14:22:42

进化吧！原始人

如果你想体验一下人类的进化过程~ 如果你有一颗充满探索的好奇心~ 千万不要错过博主新开发的小游戏哦&#xff01; 点击链接&#xff0c;立即体验&#xff01; &#x1f64b; 欢迎来到冒险互动游戏《进化吧原始人》&#xff01; &#x1f98d; 在这里&#xff0c;你将扮演一…...

编程日记 2024/10/18 14:21:41

SaaS架构：中央库存系统架构设计

大家好&#xff0c;我是汤师爷~ 近年来&#xff0c;越来越多的零售企业大力发展全渠道业务。在销售额增长上&#xff0c;通过线上的小程序、直播、平台渠道等方式&#xff0c;拓展流量变现渠道。在会员增长方面&#xff0c;通过多样的互动方式&#xff0c;全渠道触达消费者&am…...

编程日记 2024/10/18 14:20:40

C语言中点操作符（.）和箭头操作符（-＞）的区别

在C语言中&#xff0c;点操作符&#xff08;.&#xff09;和箭头操作符&#xff08;->&#xff09;用于访问结构体的成员&#xff0c;但它们的使用方式有所不同。以下是具体介绍&#xff1a; 点操作符&#xff08;.&#xff09;的使用 直接访问结构体变量的成员&#xff1a…...

编程日记 2024/10/18 14:18:38

业务系统对接大模型的基础方案：架构设计与关键步骤

业务系统对接大模型&#xff1a;架构设计与关键步骤 在当今数字化转型的浪潮中&#xff0c;大语言模型&#xff08;LLM&#xff09;已成为企业提升业务效率和创新能力的关键技术之一。将大模型集成到业务系统中&#xff0c;不仅可以优化用户体验&#xff0c;还能为业务决策提供…...

编程新知 2025/12/25 2:41:33

应用升级/灾备测试时使用guarantee 闪回点迅速回退

1.场景 应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。 相对于RMAN恢复需要很长时间&#xff0c; 数据库闪回只需要几分钟。 2.技术实现 数据库设置 2个db_recovery参数 创建guarantee闪回点&#xff0c;不需要开启数据库闪回。…...

编程新知 2025/7/30 7:20:17

tree 树组件大数据卡顿问题优化

问题背景 项目中有用到树组件用来做文件目录&#xff0c;但是由于这个树组件的节点越来越多&#xff0c;导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多&#xff0c;导致的浏览器卡顿&#xff0c;这里很明显就需要用到虚拟列表的技术&…...

编程新知 2025/12/22 5:49:51

智能分布式爬虫的数据处理流水线优化：基于深度强化学习的数据质量控制

在数字化浪潮席卷全球的今天&#xff0c;数据已成为企业和研究机构的核心资产。智能分布式爬虫作为高效的数据采集工具&#xff0c;在大规模数据获取中发挥着关键作用。然而&#xff0c;传统的数据处理流水线在面对复杂多变的网络环境和海量异构数据时&#xff0c;常出现数据质…...

编程新知 2025/12/22 12:55:54

2023赣州旅游投资集团

单选题 1.“不登高山&#xff0c;不知天之高也&#xff1b;不临深溪&#xff0c;不知地之厚也。”这句话说明_____。 A、人的意识具有创造性 B、人的认识是独立于实践之外的 C、实践在认识过程中具有决定作用 D、人的一切知识都是从直接经验中获得的 参考答案: C 本题解…...

编程新知 2025/11/8 16:42:13

nnUNet V2修改网络——暴力替换网络为UNet++

更换前，要用nnUNet V2跑通所用数据集，证明nnUNet V2、数据集、运行环境等没有问题 阅读nnU-Net V2 的 U-Net结构，初步了解要修改的网络，知己知彼，修改起来才能游刃有余。 U-Net存在两个局限，一是网络的最佳深度因应用场景而异，这取决于任务的难度和可用于训练的标注数…...

编程新知 2025/12/24 23:55:04

消防一体化安全管控平台：构建消防“一张图”和APP统一管理

在城市的某个角落&#xff0c;一场突如其来的火灾打破了平静。熊熊烈火迅速蔓延&#xff0c;滚滚浓烟弥漫开来&#xff0c;周围群众的生命财产安全受到严重威胁。就在这千钧一发之际&#xff0c;消防救援队伍迅速行动&#xff0c;而豪越科技消防一体化安全管控平台构建的消防“…...

编程新知 2025/12/25 14:07:20

ThreadLocal 源码

ThreadLocal 源码 此类提供线程局部变量。这些变量不同于它们的普通对应物&#xff0c;因为每个访问一个线程局部变量的线程&#xff08;通过其 get 或 set 方法&#xff09;都有自己独立初始化的变量副本。ThreadLocal 实例通常是类中的私有静态字段&#xff0c;这些类希望将…...

编程新知 2025/11/5 10:19:24

【记录坑点问题】IDEA运行：maven-resources-production:XX: OOM: Java heap space

问题&#xff1a;IDEA出现maven-resources-production:operation-service: java.lang.OutOfMemoryError: Java heap space 解决方案&#xff1a;将编译的堆内存增加一点 位置&#xff1a;设置setting-》构建菜单build-》编译器Complier...

编程新知 2025/12/25 1:37:36

Element-Plus：popconfirm与tooltip一起使用不生效？

你们好&#xff0c;我是金金金。 场景 我正在使用Element-plus组件库当中的el-popconfirm和el-tooltip&#xff0c;产品要求是两个需要结合一起使用&#xff0c;也就是鼠标悬浮上去有提示文字&#xff0c;并且点击之后需要出现气泡确认框 代码 <el-popconfirm title"是…...

编程新知 2025/12/25 0:09:41