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

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

news 2025/9/16 5:40: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

关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案

问题描述&#xff1a;iview使用table 中type: "index",分页之后 &#xff0c;索引还是从1开始&#xff0c;试过绑定后台返回数据的id, 这种方法可行&#xff0c;就是后台返回数据的每个页面id都不完全是按照从1开始的升序&#xff0c;因此百度了下&#xff0c;找到了…...

编程新知 2025/9/9 14:50:29

MVC 数据库

MVC 数据库 引言 在软件开发领域，Model-View-Controller（MVC）是一种流行的软件架构模式，它将应用程序分为三个核心组件：模型（Model）、视图（View）和控制器（Controller）。这种模式有助于提高代码的可维护性和可扩展性。本文将深入探讨MVC架构与数据库之间的关系，以…...

编程新知 2025/8/16 14:02:21

（转）什么是DockerCompose?它有什么作用？

一、什么是DockerCompose? DockerCompose可以基于Compose文件帮我们快速的部署分布式应用&#xff0c;而无需手动一个个创建和运行容器。 Compose文件是一个文本文件&#xff0c;通过指令定义集群中的每个容器如何运行。 DockerCompose就是把DockerFile转换成指令去运行。 …...

编程新知 2025/9/13 20:11:00

Maven 概述、安装、配置、仓库、私服详解

目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...

编程新知 2025/9/7 8:50:41

基于PHP的连锁酒店管理系统

有需要请加文章底部Q哦 可远程调试 基于PHP的连锁酒店管理系统 一 介绍 连锁酒店管理系统基于原生PHP开发&#xff0c;数据库mysql&#xff0c;前端bootstrap。系统角色分为用户和管理员。 技术栈 phpmysqlbootstrapphpstudyvscode 二 功能 用户 1 注册/登录/注销 2 个人中…...

编程新知 2025/9/3 20:37:55

华为OD机试-最短木板长度-二分法(A卷,100分)

此题是一个最大化最小值的典型例题&#xff0c; 因为搜索范围是有界的&#xff0c;上界最大木板长度补充的全部木料长度&#xff0c;下界最小木板长度&#xff1b; 即left0,right10^6; 我们可以设置一个候选值x(mid)&#xff0c;将木板的长度全部都补充到x&#xff0c;如果成功…...

编程新知 2025/9/12 15:34:33

实战三：开发网页端界面完成黑白视频转为彩色视频

​一、需求描述 设计一个简单的视频上色应用&#xff0c;用户可以通过网页界面上传黑白视频&#xff0c;系统会自动将其转换为彩色视频。整个过程对用户来说非常简单直观&#xff0c;不需要了解技术细节。 效果图 ​二、实现思路 总体思路&#xff1a; 用户通过Gradio界面上…...

编程新知 2025/9/9 10:08:54

Vue 模板语句的数据来源

&#x1f9e9; Vue 模板语句的数据来源&#xff1a;全方位解析 Vue 模板&#xff08;<template> 部分&#xff09;中的表达式、指令绑定&#xff08;如 v-bind, v-on&#xff09;和插值&#xff08;{{ }}&#xff09;都在一个特定的作用域内求值。这个作用域由当前 组件…...

编程新知 2025/6/16 3:14:00

Docker拉取MySQL后数据库连接失败的解决方案

在使用Docker部署MySQL时&#xff0c;拉取并启动容器后&#xff0c;有时可能会遇到数据库连接失败的问题。这种问题可能由多种原因导致&#xff0c;包括配置错误、网络设置问题、权限问题等。本文将分析可能的原因&#xff0c;并提供解决方案。 一、确认MySQL容器的运行状态 …...

编程新知 2025/8/13 11:33:10

上位机开发过程中的设计模式体会(1)：工厂方法模式、单例模式和生成器模式

简介 在我的 QT/C 开发工作中&#xff0c;合理运用设计模式极大地提高了代码的可维护性和可扩展性。本文将分享我在实际项目中应用的三种创造型模式&#xff1a;工厂方法模式、单例模式和生成器模式。 1. 工厂模式 (Factory Pattern) 应用场景 在我的 QT 项目中曾经有一个需…...

编程新知 2025/8/18 3:01:22