如何在React中集成 PDF.js？构建支持打印下载的PDF阅读器详解

本文深入解析基于 React 和 PDF.js 构建 PDF 查看器的实现方案，该组件支持 PDF 渲染、图片打印和下载功能，并包含完整的加载状态与错误处理机制。

完整代码在最后

一个PDF 文件：

https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf

效果展示：

在这里插入图片描述

安装 PDF.js

要使用 pdf.js，你可以通过 npm 安装它。以下是安装和配置 pdf.js 的详细步骤：

1. 安装 pdfjs-dist

pdf.js 的官方 npm 包名为 pdfjs-dist。可以通过以下命令安装：

npm install pdfjs-dist
  • pdfjs-dist 是 PDF.js 的分发版本，包含了核心功能和 Worker 文件。
  • 安装完成后，你可以在项目中直接引入并使用。

2. 设置 Worker 文件路径

PDF.js 需要一个 Worker 文件来处理 PDF 渲染任务。默认情况下，Worker 文件路径需要手动设置。

方法 1：使用 CDN

如果你不想将 Worker 文件打包到项目中，可以直接使用 CDN 提供的 Worker 文件：

import { GlobalWorkerOptions } from 'pdfjs-dist';// 设置 Worker 文件路径
GlobalWorkerOptions.workerSrc = '//cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.worker.min.js';
方法 2：本地 Worker 文件

如果你希望将 Worker 文件打包到项目中，可以这样做：

  1. 在代码中引入 Worker 文件：

    import { GlobalWorkerOptions, getDocument } from 'pdfjs-dist';
import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry';// 设置 Worker 文件路径
GlobalWorkerOptions.workerSrc = pdfjsWorker;

  2. 这种方式适合离线环境或需要完全控制依赖的情况。

技术架构解析

1. 核心依赖
  • PDF.js：Mozilla 开源的 PDF 解析库，支持 Web 端 PDF 渲染
  • React Hooks：使用 useState 管理状态，useEffect 处理副作用，useRef 操作 DOM
  • Ant Design：采用 Button 组件构建操作界面

pdf.js 官网：https://mozilla.github.io/pdf.js/

2. 初始化配置

通过配置 Worker 文件实现 PDF 解析的 Web Worker 并行处理，避免阻塞主线程。

GlobalWorkerOptions.workerSrc = '//cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.worker.min.js';

核心功能实现

1. PDF 渲染流程

这段代码的核心功能是加载一个 PDF 文件，并将其第一页渲染到 <canvas> 元素中。

// 加载 PDF 并渲染到 canvasuseEffect(() => {const abortController = new AbortController();if (!pdfUrl) return;setIsLoading(true);setError(null);getDocument({url: pdfUrl,cMapUrl: '/cmaps/', // 引入字体映射文件cMapPacked: true, // 启用字体映射文件}).promise.then((pdf) => {if (abortController.signal.aborted) return;console.log('PDF loaded');// 获取第一页pdf.getPage(1).then((page) => {if (abortController.signal.aborted) {page.cleanup();return;}console.log('Page 1 loaded');const scale = 1.5;const viewport = page.getViewport({ scale });if (!canvasRef.current) {throw new Error('Canvas element not found');}const canvas = canvasRef.current;const context = canvas.getContext('2d');// 清除之前的画布内容context?.clearRect(0, 0, canvas.width, canvas.height);canvas.height = viewport.height;canvas.width = viewport.width;console.log('Canvas尺寸设置:', canvas.width, 'x', canvas.height);// 渲染 PDF 页面到 canvasconst renderContext: any = {canvasContext: context,viewport: viewport,};const renderTask = page.render(renderContext);renderTask.promise.then(() => {console.log('页面渲染完成');setIsLoading(false);}).catch((renderError) => {if (!abortController.signal.aborted) {setError('页面渲染失败: ' + renderError.message);}});});}).catch((error) => {if (!abortController.signal.aborted) {setError('PDF加载失败: ' + error.message);console.error('Error loading PDF:', error);}}).finally(() => {if (!abortController.signal.aborted) {setIsLoading(false);}});return () => {abortController.abort();const canvas = canvasRef.current;if (canvas) {const context = canvas.getContext('2d');context?.clearRect(0, 0, canvas.width, canvas.height);}};}, [pdfUrl]);
  • 初始化加载状态：设置加载提示和清理错误信息。
  • 加载 PDF 文件：使用 getDocument 加载 PDF，并获取第一页。
  • 计算视口与画布尺寸：根据缩放比例调整 <canvas> 的大小。
  • 渲染 PDF 页面：将 PDF 页面绘制到 <canvas> 上。
  • 错误处理与清理：捕获加载和渲染中的错误，并在组件卸载时清理资源。

以下是核心实现原理与技术要点的详细解读：

1. useEffect 的作用
useEffect(() => {// ...
}, [pdfUrl]);
  • useEffect 是 React 的生命周期钩子，用于处理副作用（如数据加载、DOM 操作等）。
  • 这里的依赖项 [pdfUrl] 表示当 pdfUrl 发生变化时，这个 useEffect 会重新执行。
  • 如果 pdfUrl 为空或未改变，则不会触发新的加载。
2. 创建 AbortController
const abortController = new AbortController();
  • AbortController 是一个浏览器内置的 API，用于取消异步操作（如网络请求）。
  • 在这里，我们用它来确保在组件卸载或重新加载时，可以中断正在进行的 PDF 加载任务，避免内存泄漏或不必要的资源消耗。
3. 检查 pdfUrl 是否有效
if (!pdfUrl) return;
  • 如果 pdfUrl 为空，则直接退出函数，避免无效操作。
4. 设置加载状态
setIsLoading(true);
setError(null);
  • 将 isLoading 设置为 true，表示开始加载 PDF。
  • 清空之前的错误信息（如果有）。
5. 加载 PDF 文件
getDocument(pdfUrl).promise.then((pdf) => { ... }).catch((error) => { ... }).finally(() => { ... });
  • getDocument 是 PDF.js 提供的方法，用于加载 PDF 文件。
  • 它返回一个 Promise，成功时会返回一个 pdf 对象，失败时会抛出错误。
关键点：

  • abortController.signal.aborted：

    if (abortController.signal.aborted) return;
    • 如果组件已经被卸载或取消了加载任务，则直接退出，避免继续执行无意义的操作。

  • pdf.getPage(1) ：

    pdf.getPage(1).then((page) => { ... });
    • getPage(1) 获取 PDF 的第一页（索引从 1 开始）。
6. 计算视口与画布尺寸
const scale = 1.5;
const viewport = page.getViewport({ scale });if (!canvasRef.current) {throw new Error('Canvas element not found');
}
const canvas = canvasRef.current;
const context = canvas.getContext('2d');// 清除之前的画布内容
context?.clearRect(0, 0, canvas.width, canvas.height);canvas.height = viewport.height;
canvas.width = viewport.width;
console.log('Canvas尺寸设置:', canvas.width, 'x', canvas.height);
关键点：

  1. scale：

    • scale=1.5 表示将 PDF 页面放大 1.5 倍进行渲染。
    • 可以根据需求调整缩放比例。

  2. getViewport：

    • getViewport({ scale }) 根据缩放比例计算页面的视口尺寸（宽度和高度）。

  3. 清空画布：

    • 使用 context.clearRect 清除之前的内容，确保每次渲染都是干净的。

  4. 设置画布尺寸：

    • 将 <canvas> 的宽高设置为视口的宽高，以匹配 PDF 页面的比例。
7. 渲染 PDF 页面到 Canvas
const renderContext: any = {canvasContext: context,viewport: viewport,
};const renderTask = page.render(renderContext);renderTask.promise.then(() => {console.log('页面渲染完成');setIsLoading(false);}).catch((renderError) => {if (!abortController.signal.aborted) {setError('页面渲染失败: ' + renderError.message);}});
关键点：

  1. renderContext：

    • 包含两个主要属性：

      • canvasContext：指向 <canvas> 的 2D 上下文。
      • viewport：定义了渲染区域的尺寸和比例。

  2. page.render：

    • 调用 page.render 方法将 PDF 页面渲染到 <canvas> 上。
    • 返回一个 renderTask 对象，包含一个 promise，用于监听渲染完成或失败的状态。

  3. 渲染完成后的回调：

    • 当渲染成功时，将 isLoading 设置为 false，隐藏加载提示。
    • 如果渲染失败，则记录错误信息。
8. 错误处理
.catch((error) => {if (!abortController.signal.aborted) {setError('PDF加载失败: ' + error.message);console.error('Error loading PDF:', error);}
})
.finally(() => {if (!abortController.signal.aborted) {setIsLoading(false);}
});
关键点：

  1. 捕获加载错误：

    • 如果 PDF 加载失败（如 URL 错误或网络问题），则设置错误信息并打印日志。

  2. finally 块：

    • 无论成功还是失败，都会执行 finally 块。
    • 确保即使发生错误，isLoading 也会被重置为 false，避免加载状态卡住。
9. 清理逻辑
return () => {abortController.abort();const canvas = canvasRef.current;if (canvas) {const context = canvas.getContext('2d');context?.clearRect(0, 0, canvas.width, canvas.height);}
};
关键点：

  1. 取消加载任务：

    • abortController.abort() 中断正在进行的 PDF 加载任务，避免资源浪费。

  2. 清理画布：

    • 在组件卸载时清除 <canvas> 的内容，确保没有残留的绘制数据。

2. 打印功能实现

效果展示：

在这里插入图片描述

 // 打印 PDF 页面const handlePrint = () => {const canvas = canvasRef.current;if (canvas) {// 创建隐藏的iframeconst iframe = document.createElement('iframe');iframe.style.display = 'none';document.body.appendChild(iframe);// 将canvas内容转换为图片const imgData = canvas.toDataURL('image/png');const printDocument = iframe.contentWindow?.document;if (printDocument) {printDocument.open();printDocument.write(`<html><head><title>Print</title></head><body style="margin: 0;"><img src="${imgData}" style="width: 100%; height: auto;" /></body></html>`);printDocument.close();// 延迟执行打印以确保内容加载setTimeout(() => {iframe.contentWindow?.print();document.body.removeChild(iframe);}, 500);}}};
  • 获取 <canvas> 内容：将画布内容转换为 Base64 编码的图片数据。
  • 创建隐藏的 <iframe> ：提供一个独立的文档环境，用于打印特定内容。
  • 向 <iframe> 中写入 HTML：将图片嵌入到 <iframe> 的文档中。
  • 触发打印：延迟调用浏览器的打印功能，并在完成后清理 <iframe>。
1. 函数定义
const handlePrint = () => { ... }
  • 这是一个 React 组件中的方法，用于处理 PDF 页面的打印操作。
  • 当用户点击“打印”按钮时，会调用这个函数。
2. 获取 <canvas> 元素
const canvas = canvasRef.current;
if (canvas) { ... }
  • 使用 canvasRef.current 获取当前组件中引用的 <canvas> 元素。
  • 如果 <canvas> 存在，则继续执行打印逻辑；否则直接退出。
3. 创建隐藏的 <iframe>
const iframe = document.createElement('iframe');
iframe.style.display = 'none';
document.body.appendChild(iframe);
关键点：

  1. 为什么使用 <iframe>？

    • 浏览器的打印功能通常会打印整个页面的内容。为了只打印特定内容（如 <canvas> 的内容），我们将其封装到一个隐藏的 <iframe> 中。
    • <iframe> 是一个独立的文档环境，不会影响主页面的内容。

  2. 隐藏 <iframe>

    • 设置 iframe.style.display = 'none' 将其隐藏，避免用户看到额外的 UI 元素。

  3. 添加到 DOM

    • 使用 document.body.appendChild(iframe) 将 <iframe> 添加到页面的 DOM 树中。
4. 将 <canvas> 内容转换为图片
const imgData = canvas.toDataURL('image/png');
关键点：

  1. toDataURL 方法

    • <canvas> 提供了 toDataURL 方法，可以将画布内容转换为 Base64 编码的图片数据。
    • 参数 'image/png' 指定输出的图片格式为 PNG。

  2. Base64 图片数据

    • imgData 是一个字符串，包含图片的 Base64 编码。例如：

      data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...
5. 向 <iframe> 中写入 HTML 内容
const printDocument = iframe.contentWindow?.document;
if (printDocument) {printDocument.open();printDocument.write(`<html><head><title>Print</title></head><body style="margin: 0;"><img src="${imgData}" style="width: 100%; height: auto;" /></body></html>`);printDocument.close();
}
关键点：

  1. 获取 <iframe> 的文档对象

    • iframe.contentWindow?.document 获取 <iframe> 的 document 对象。
    • 使用可选链操作符 ?. 确保 contentWindow 存在。

  2. 写入 HTML 内容

    • 调用 printDocument.open() 打开文档流。

    • 使用 printDocument.write() 向文档中写入 HTML 内容。

    • 写入的内容包括：

      • 一个 <img> 标签，其 src 属性设置为 Base64 图片数据。
      • 样式设置为 width: 100% 和 height: auto，确保图片自适应打印区域。

    • 调用 printDocument.close() 关闭文档流。

6. 延迟执行打印
setTimeout(() => {iframe.contentWindow?.print();document.body.removeChild(iframe);
}, 500);
关键点：

  1. 延迟执行

    • 使用 setTimeout 延迟 500 毫秒后再执行打印操作。
    • 这是为了确保 <iframe> 中的内容已经完全加载，避免打印时出现空白或不完整的情况。

  2. 触发打印

    • 调用 iframe.contentWindow?.print() 触发浏览器的打印对话框。
    • 用户可以选择打印机或保存为 PDF。

  3. 清理 <iframe>

    • 打印完成后，使用 document.body.removeChild(iframe) 从 DOM 中移除 <iframe>，释放资源。

3. 下载功能实现

将 <canvas> 中的内容转换为图片，并提供下载功能。用户点击“下载”按钮后，会触发这个函数，将画布内容保存为 PNG 文件。

效果展示：

在这里插入图片描述

// 下载 PDF 页面const handleDownload = () => {const canvas = canvasRef.current;if (canvas) {const imgData = canvas.toDataURL('image/png');const fileName = pdfUrl.split('/').pop()?.replace(/\.pdf$/i, '') || 'download';const link = document.createElement('a');link.download = `${fileName}.png`;link.href = imgData;document.body.appendChild(link);link.click();document.body.removeChild(link);}}
  • 获取 <canvas> 内容：将画布内容转换为 Base64 编码的图片数据。
  • 生成文件名：根据 pdfUrl 提取文件名，并移除 .pdf 后缀。
  • 创建下载链接：动态生成一个 <a> 元素，并设置其 href 和 download 属性。
  • 触发下载：通过模拟点击事件触发浏览器的下载功能，并在完成后清理 DOM。
1. 函数定义
const handleDownload = () => { ... }
  • 这是一个 React 组件中的方法，用于处理 PDF 页面的下载操作。
  • 当用户点击“下载”按钮时，会调用这个函数。
2. 获取 <canvas> 元素
const canvas = canvasRef.current;
if (canvas) { ... }
  • 使用 canvasRef.current 获取当前组件中引用的 <canvas> 元素。
  • 如果 <canvas> 存在，则继续执行下载逻辑；否则直接退出。
3. 将 <canvas> 内容转换为图片
const imgData = canvas.toDataURL('image/png');
关键点：

  1. toDataURL 方法

    • <canvas> 提供了 toDataURL 方法，可以将画布内容转换为 Base64 编码的图片数据。
    • 参数 'image/png' 指定输出的图片格式为 PNG。

  2. Base64 图片数据

    • imgData 是一个字符串，包含图片的 Base64 编码。例如：

      data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...
4. 生成文件名
const fileName = pdfUrl.split('/').pop()?.replace(/.pdf$/i, '') || 'download';
关键点：

  1. 提取文件名

    • pdfUrl.split('/') 将 pdfUrl 按 / 分隔成数组。
    • .pop() 获取数组的最后一个元素，通常是文件名（如 example.pdf）。

  2. 移除 .pdf 后缀

    • .replace(/.pdf$/i, '') 使用正则表达式将文件名中的 .pdf 后缀替换为空字符串。

    • /.pdf$/i 的含义：

      • . 匹配点号（. 是特殊字符，需要用反斜杠转义）。
      • pdf 匹配字符串 “pdf”。
      • $ 表示匹配字符串的结尾。
      • i 表示忽略大小写。

  3. 默认文件名

    • 如果 pdfUrl 为空或无法提取文件名，则使用默认值 'download'。
5. 创建下载链接
const link = document.createElement('a');
link.download = `${fileName}.png`;
link.href = imgData;
关键点：

  1. 创建 <a> 元素

    • document.createElement('a') 创建一个 HTML 锚点（<a>）元素。
    • 这个元素用于模拟下载行为。

  2. 设置下载属性

    • link.download = ${fileName}.png` 设置下载文件的名称。
    • 例如，如果 fileName 是 example，则下载的文件名为 example.png。

  3. 设置链接地址

    • link.href = imgData 将 Base64 图片数据赋值给 href 属性。
    • 浏览器会将其识别为一个可下载的资源。
6. 触发下载
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
关键点：

  1. 添加到 DOM

    • 使用 document.body.appendChild(link) 将 <a> 元素临时添加到页面的 DOM 树中。
    • 这是为了确保浏览器能够识别并触发下载行为。

  2. 触发点击事件

    • 调用 link.click() 模拟用户点击下载链接。
    • 浏览器会自动开始下载文件。

  3. 清理 DOM

    • 使用 document.body.removeChild(link) 从 DOM 中移除 <a> 元素。
    • 避免页面上留下多余的元素。

总结

本文实现的 PDF 查看器具有以下特点：

特性实现方案优势
按需加载首屏仅加载第一页快速呈现
打印/下载Canvas 转图片方案跨浏览器兼容性好
错误恢复状态隔离 + 错误边界增强组件健壮性
内存安全AbortController + 清理函数防止内存泄漏

该方案为基本的 PDF 预览需求提供了可靠实现，开发者可根据具体业务场景进行扩展优化。对于需要完整 PDF 功能（如文本选择、表单填写等）的场景，建议结合 PDF.js 的完整功能 API 进行深度定制。

完整代码：

import React, { useEffect, useRef, useState } from 'react';
import { getDocument } from 'pdfjs-dist';
import { GlobalWorkerOptions } from 'pdfjs-dist';
import { Button } from 'antd';// 设置 Worker 文件路径
GlobalWorkerOptions.workerSrc = '//cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.worker.min.js';// 为 pdfUrl 参数添加 string 类型注解，解决隐式 any 类型问题
const PDFViewer = ({ pdfUrl }: { pdfUrl: string }) => {const canvasRef = useRef<HTMLCanvasElement>(null);const [isLoading, setIsLoading] = useState(true);const [error, setError] = useState<string | null>(null);// 打印 PDF 页面const handlePrint = () => {const canvas = canvasRef.current;if (canvas) {// 创建隐藏的iframeconst iframe = document.createElement('iframe');iframe.style.display = 'none';document.body.appendChild(iframe);// 将canvas内容转换为图片const imgData = canvas.toDataURL('image/png');const printDocument = iframe.contentWindow?.document;if (printDocument) {printDocument.open();printDocument.write(`<html><head><title>Print</title></head><body style="margin: 0;"><img src="${imgData}" style="width: 100%; height: auto;" /></body></html>`);printDocument.close();// 延迟执行打印以确保内容加载setTimeout(() => {iframe.contentWindow?.print();document.body.removeChild(iframe);}, 500);}}};// 下载 PDF 页面const handleDownload = () => {const canvas = canvasRef.current;if (canvas) {const imgData = canvas.toDataURL('image/png');const fileName = pdfUrl.split('/').pop()?.replace(/\.pdf$/i, '') || 'download';const link = document.createElement('a');link.download = `${fileName}.png`;link.href = imgData;document.body.appendChild(link);link.click();document.body.removeChild(link);}}// 加载 PDF 并渲染到 canvasuseEffect(() => {const abortController = new AbortController();if (!pdfUrl) return;setIsLoading(true);setError(null);getDocument(pdfUrl).promise.then((pdf) => {if (abortController.signal.aborted) return;console.log('PDF loaded');// 获取第一页pdf.getPage(1).then((page) => {if (abortController.signal.aborted) {page.cleanup();return;}console.log('Page 1 loaded');const scale = 1.5;const viewport = page.getViewport({ scale });if (!canvasRef.current) {throw new Error('Canvas element not found');}const canvas = canvasRef.current;const context = canvas.getContext('2d');// 清除之前的画布内容context?.clearRect(0, 0, canvas.width, canvas.height);canvas.height = viewport.height;canvas.width = viewport.width;console.log('Canvas尺寸设置:', canvas.width, 'x', canvas.height);// 渲染 PDF 页面到 canvasconst renderContext: any = {canvasContext: context,viewport: viewport,};const renderTask = page.render(renderContext);renderTask.promise.then(() => {console.log('页面渲染完成');setIsLoading(false);}).catch((renderError) => {if (!abortController.signal.aborted) {setError('页面渲染失败: ' + renderError.message);}});});}).catch((error) => {if (!abortController.signal.aborted) {setError('PDF加载失败: ' + error.message);console.error('Error loading PDF:', error);}}).finally(() => {if (!abortController.signal.aborted) {setIsLoading(false);}});return () => {abortController.abort();const canvas = canvasRef.current;if (canvas) {const context = canvas.getContext('2d');context?.clearRect(0, 0, canvas.width, canvas.height);}};}, [pdfUrl]);return (<div style={{ position: 'relative', width: '100%' }}><Button onClick={handlePrint}>打印</Button><Button onClick={handleDownload}>下载</Button>{isLoading && <div>加载中...</div>}{error && <div style={{ color: 'red' }}>{error}</div>}<div id="printPdfButton"></div><canvaskey={pdfUrl}ref={canvasRef}style={{ width: '100%', height: 'auto' }}/></div>);
};export default PDFViewer;

使用此组件：

import React from "react";
import "./index.less";
import PDFViewer from "./PDFViewer";const ImgePage = () => {return (<divstyle={{ height: "80vh", border: "1px solid #ddd", position: "relative" }}><PDFViewerpdfUrl={"https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf"}/></div>);
};export default ImgePage;

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

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

相关文章

数据结构与算法-动态规划-线性动态规划，0-1背包，多重背包，完全背包，有依赖的背包，分组背包，背包计数，背包路径

数据结构与算法-动态规划-线性动态规划，0-1背包，多重背包，完全背包，有依赖的背包，分组背包，背包计数，背包路径

动态规划原理 动态规划这玩意儿&#xff0c;就好比是在拓扑图上玩跳格子游戏。在图论中&#xff0c;咱们是从特定的节点跳到其他节点&#xff1b;而在动态规划里呢&#xff0c;我们是从一个状态 “嗖” 地转移到另一个状态。状态一般用数组来表示&#xff0c;就像 f [i][j]&am…
阅读更多...
解决文件夹解压中文字符产生乱码的问题

解决文件夹解压中文字符产生乱码的问题

太tm智能了&#xff0c;本来还想看看解压工具在哪里修改&#xff0c;智能的识别到乱码了。点赞 看到那个地球了吗&#xff0c;点击那个球&#xff0c;这个修改不是侵略性的&#xff0c;不会修改压缩文件本身所以需要在当前页面解压 参考 https://blog.csdn.net/QCSYSZQ/artic…
阅读更多...
C++与C的区别

C++与C的区别

目录 前言 一、从字面上看 二、从编程思想上看 三、C 和 C++ 都有各自适合的领域和特性 四、划重点 前言 本文主要对 C 和 C++ 两种编程语言进行对比区分，便于大家理解 一、从字面上看 1.首先：两者第一个字符完全一致 说明：C++ 完全兼容 C ，凡是合法的 C 程序在 C…
阅读更多...
水利水电安全员ABC适合哪些人考？

水利水电安全员ABC适合哪些人考？

水利水电安全员证是水利工程建设领域的重要职业资格证书&#xff0c;主要涉及水利水电工程施工安全管理、风险防控和应急处理等工作。那么&#xff0c;哪些人适合考取&#xff1f; 哪些人适合考水利水电安全员&#xff1f; 1. 水利水电工程从业人员 ✅ 施工管理人员&#xf…
阅读更多...
Linux中用gdb查看coredump文件

Linux中用gdb查看coredump文件

查看dump的命令&#xff1a; gdb 可执行文件 dump文件路径查看函数调用栈 (gdb)bt查看反汇编代码 (gdb)disassemble查看寄存器的值 (gdb)info all-registers如果通过上述简单命令无法排查&#xff0c;还是通过-g参数编译带符号表的可执行文件&#xff0c;再用gdb查看
阅读更多...
【前端】【React】useCallback的作用与使用场景总结

【前端】【React】useCallback的作用与使用场景总结

一、useCallback 的作用与使用场景总结 useCallback 是 React 提供的一个 Hook&#xff0c;用于缓存函数的引用&#xff0c;避免因为组件重新渲染而导致函数地址发生变化。它返回一个记忆&#xff08;memoized&#xff09;后的回调函数&#xff0c;只有当依赖项发生变化时才会…
阅读更多...
蓝桥杯备赛学习笔记：高频考点与真题预测（C++/Java/python版）

蓝桥杯备赛学习笔记：高频考点与真题预测（C++/Java/python版）

2025蓝桥杯备赛学习笔记 ——高频考点与真题预测 一、考察趋势分析 通过对第13-15届蓝桥杯真题的分析&#xff0c;可以发现题目主要围绕基础算法、数据结构、数学问题、字符串处理、编程语言基础展开&#xff0c;且近年逐渐增加动态规划、图论、贪心算法等较难题目。 1. 基…
阅读更多...
20250410在荣品的PRO-RK3566开发板使用Rockchip原厂的buildroot系统时自动挂载eth0【直接编译进IMG】

20250410在荣品的PRO-RK3566开发板使用Rockchip原厂的buildroot系统时自动挂载eth0【直接编译进IMG】

【暂时没有找到第一次编译就可以修改的地方&#xff01;&#xff01;&#xff01;&#xff01;】 rootrootrootroot-X99-Turbo:~/RK3566_RK3568_Linux5.10_V1.2.0$ find . -name interfaces 【完整编译之后&#xff0c;基本确认修改这里有效。】 ./buildroot/output/rockchip_r…
阅读更多...
c11新特性，继承构造函数

c11新特性，继承构造函数

#include <iostream> #include <string>class Person { public:std::string name;int age;// 主构造函数Person(const std::string& name, int age) : name(name), age(age) {std::cout << "Person created with name: " << name <&l…
阅读更多...
【TS学习】（24）什么是装饰器

【TS学习】（24）什么是装饰器

在 TypeScript 中&#xff0c;装饰器&#xff08;Decorators&#xff09; 是一种特殊的声明&#xff0c;用于为类、类成员&#xff08;属性、方法、访问器&#xff09;、方法参数或整个类添加元数据或修改其行为。装饰器是 JavaScript 和 TypeScript 的实验性特性&#xff0c;广…
阅读更多...
datagrip如何连接数据库

datagrip如何连接数据库

datagrip连接数据库的步骤 2025版本 想要链接数据库是需要一个jar包的&#xff0c;所以将上面进行删除之后&#xff0c;需要下载一个jar包 那么这个时候需要链接上传一个mysql链接的jar包 选择核心驱动类 上述操作完成之后&#xff0c;然后点击apply再点击ok即可 如下图说明my…
阅读更多...
菊风RTC 2.0 开发者文档正式发布，解锁音视频新体验！

菊风RTC 2.0 开发者文档正式发布，解锁音视频新体验！

重磅发布&#xff01; 开发者们&#xff0c;菊风实时音视频2.0文档已正式发布上线&#xff0c;为您提供更清晰、更高效的开发支持&#xff01;让菊风实时音视频2.0为您的音视频应用加速~ 菊风实时音视频2.0聚焦性能升级、体验升级、录制服务升级&#xff0c;助力视频通话、语…
阅读更多...
轻量级碎片化笔记memos本地NAS部署与跨平台跨网络同步笔记实战

轻量级碎片化笔记memos本地NAS部署与跨平台跨网络同步笔记实战

文章目录 前言1. 使用Docker部署memos2. 注册账号与简单操作演示3. 安装cpolar内网穿透4. 创建公网地址5. 创建固定公网地址 推荐 ​ 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。 点击跳转到网站 前言…
阅读更多...
【Vue #2】脚手架 指令

【Vue #2】脚手架 指令

一、脚手架 脚手架&#xff1a;一个保证各项工作顺利开展的平台&#xff0c;方便我们 拿来就用&#xff0c;零配置 1. Vue 代码开发方式 相比直接 script 引入 vue 源码&#xff0c;有没有更好的方式编写vue代码呢? ① 传统开发模式&#xff1a; 基于html文件开发Vue&…
阅读更多...
ArkTS语言入门之接口、泛型、空安全、特殊运算符等

ArkTS语言入门之接口、泛型、空安全、特殊运算符等

前言 臭宝们&#xff0c;今天我们来学习ArkTS中最后的一些内容。 实现接口 包含implements子句的类必须实现列出的接口中定义的所有方法&#xff0c;但使用默认实现定义的方法除外。 interface DateInterface {now(): string; } class MyDate implements DateInterface {no…
阅读更多...
Maven超级详细安装部署

Maven超级详细安装部署

1.到底什么是Maven&#xff1f;搞清楚这个 Maven 是一个项目管理工具&#xff0c;主要用于 Java 项目的构建、依赖管理和文档生成。 它基于项目对象模型&#xff08;POM&#xff09;&#xff0c;通过 pom.xml 文件定义项目的配置。 &#xff08;简单说破&#xff1a;就是工程…
阅读更多...
高并发内存池（三）：PageCache（页缓存）的实现

高并发内存池（三）：PageCache（页缓存）的实现

前言&#xff1a; 在前两期内容中&#xff0c;我们深入探讨了内存管理机制中在 ThreadCache 和 CentralCache两个层级进行内存申请的具体实现。这两层缓存作为高效的内存分配策略&#xff0c;能够快速响应线程的内存需求&#xff0c;减少锁竞争&#xff0c;提升程序性能。 本期…
阅读更多...
机器学习 | 强化学习方法分类汇总 | 概念向

机器学习 | 强化学习方法分类汇总 | 概念向

文章目录 📚Model-Free RL vs Model-Based RL🐇核心定义🐇核心区别📚Policy-Based RL vs Value-Based RL🐇核心定义🐇 核心区别📚Monte-Carlo update vs Temporal-Difference update🐇核心定义🐇核心区别📚On-Policy vs Off-Policy🐇核心定义🐇核心区别…
阅读更多...
GSO-YOLO：基于全局稳定性优化的建筑工地目标检测算法解析

GSO-YOLO：基于全局稳定性优化的建筑工地目标检测算法解析

论文地址：https://arxiv.org/pdf/2407.00906 1. 论文概述 《GSO-YOLO: Global Stability Optimization YOLO for Construction Site Detection》提出了一种针对建筑工地复杂场景优化的目标检测模型。通过融合全局优化模块（GOM）​、稳定捕捉模块（SCM）​和创新的AIoU损失函…
阅读更多...
Java学习手册：JVM、JRE和JDK的关系

Java学习手册：JVM、JRE和JDK的关系

在Java生态系统中&#xff0c;JVM&#xff08;Java虚拟机&#xff09;、JRE&#xff08;Java运行时环境&#xff09;和JDK&#xff08;Java开发工具包&#xff09;是三个核心概念。它们共同构成了Java语言运行和开发的基础。理解它们之间的关系对于Java开发者来说至关重要。本文…
阅读更多...
最新文章

Copyright @ 2022~2023