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

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

news 文章来源：https://blog.csdn.net/jxnd123456/article/details/143044480 2025/5/9 7:09:16

       

目录

一、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

基于FPGA的以太网设计（一）

以太网简介 以太网&#xff08;Ethernet&#xff09;是一种计算机局域网技术。IEEE组织的IEEE 802.3标准制定了以太网的技术标准&#xff0c;它规定了包括物理层的连线、电子信号和介质访问控制的内容。以太网是目前应用最普遍的局域网技术&#xff0c;取代了其他局域网标准如…...

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

Insert into on duplicate key update 死锁问题解析

Insert into on duplicate key update 死锁问题解析 背景 前段时间的需求中有这个么一个场景&#xff0c;每天早上需要通过定时任务到不同的平台拉取一些广告投放的相关数据&#xff0c;涉及的表比较多&#xff0c;数据量也比较大&#xff0c;有的需要全量同步&#xff0c;有…...

编程日记 2024/10/18 14:16:35

Apache Lucene 10 已发布！Lucene 硬件效率改进及其他改进

作者&#xff1a;来自 Elastic Adrien Grand Apache Lucene 10 刚刚发布&#xff0c;重点关注硬件效率&#xff01;查看主要版本亮点。 Apache Lucene 10 终于发布了&#xff01;自 Lucene 9.0&#xff08;于 2021 年 12 月发布&#xff0c;距今已有近 3 年&#xff09;以来&a…...

编程日记 2024/10/18 14:15:34

【SQL】SQL查询语句

目录 &#x1f384; 基本查询语法 ⭐查询多个字段 ⭐设置别名 ⭐去除重复记录 ⭐ 数据准备 ⭐ 案例 &#x1f384; 条件查询 ⭐ 语法 ⭐ 案例 &#x1f384; 聚合函数 ⭐ 介绍 ⭐ 常见的聚合函数 ⭐ 语法 ⭐ 案例 &#x1f384; 分组查询 ⭐ 语法 ⭐ where与having的区…...

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

AGI 之 【Dify】 之 使用 Docker 在 Windows 端本地部署 Dify 大语言模型（LLM）应用开发平台

AGI 之 【Dify】 之 使用 Docker 在 Windows 端本地部署 Dify 大语言模型&#xff08;LLM&#xff09;应用开发平台 目录 AGI 之 【Dify】 之 使用 Docker 在 Windows 端本地部署 Dify 大语言模型&#xff08;LLM&#xff09;应用开发平台 一、简单介绍 二、Docker 下载安…...

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

机器学习摘下诺奖桂冠

前言 近日&#xff0c;2024年诺贝尔物理学奖颁发给了机器学习与神经网络领域的研究者&#xff0c;这是历史上首次出现这样的情况。这项奖项原本只授予对自然现象和物质的物理学研究作出重大贡献的科学家&#xff0c;如今却将全球范围内对机器学习和神经网络的研究和开发作为了一…...

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

营销邮件软件：提升邮件营销效率必备工具！

营销邮件软件选择技巧&#xff1f;免费高效的邮件营销软件推荐&#xff1f; 如何高效地管理和优化邮件营销活动成为了企业面临的一大挑战。营销邮件软件成为提升邮件营销效率的必备工具。MailBing将深入探讨营销邮件软件的功能、优势以及如何选择合适的工具。 营销邮件软件&a…...

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

鸿蒙开发 四十五 鸿蒙状态管理(嵌套对象界面更新)

当运行时的状态变量变化&#xff0c;UI重新渲染&#xff0c;在ArkUI中称为状态管理机制&#xff0c;前提是变量必须被装饰器修饰。不是状态变量的所有更改都会引起刷新&#xff0c;只有可以被框架观测到的更改才会引起UI刷新。其中boolen、string、number类型&#xff0c;可观察…...

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

第 6 章：vue-router

1. router 相关理解 1.1 vue-router 的理解 vue 的一个插件库&#xff0c;专门用来实现 SPA 应用 1.2 对 SPA 应用的理解 单页 Web 应用&#xff08;single page web application&#xff0c;SPA&#xff09;。整个应用只有一个完整的页面。点击页面中的导航链接不会刷新页…...

编程日记 2024/10/18 14:01:16

PaddleOCR模型转换、部署全流程（Ubuntu系统）_随记2

本篇衔接文章1、环境流程需要看随记1就可以 PaddleOCR环境搭建、模型训练、推理、部署全流程&#xff08;Ubuntu系统&#xff09;_随记1 一、ONNX导出 1、环境准备 主要参考官方技术文档&#xff1a;官方技术文档 未完做完更新... 参考&#xff1a;PaddleOCR-PP-OCRv4推理详解…...

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