前端实现pdf文件预览的操作步骤方法_javascript技巧

PDF.js 是一个用 JavaScript 实现的 PDF 阅读器，可以嵌入到网页中进行 PDF 文件的预览，并且可以自定义其功能。

import React, { useEffect, useRef } from 'react';import pdfjsLib from 'pdfjs-dist';import 'pdfjs-dist/web/pdf_viewer';const PdfPreview = ({ url }) => { const pdfContainer = useRef(null); useEffect(() => { // 配置 PDF.js pdfjsLib.GlobalWorkerOptions.workerSrc = `//cdnjs.Cloudflare.com/ajax/libs/pdf.js/${pdfjsLib.version}/pdf.worker.js`; // 加载 PDF const loadingTask = pdfjsLib.getDocument(url); loadingTask.promise.then((pdf) => { // 获取第一页 pdf.getPage(1).then((page) => { const viewport = page.getViewport({ scale: 1.5 }); const canvas = document.createElement('canvas'); const context = canvas.getContext('2d'); canvas.height = viewport.height; canvas.width = viewport.width; const renderContext = { canvasContext: context, viewport: viewport }; page.render(renderContext).promise.then(() => { pdfContainer.current.appendChild(canvas); }); }); }); }, [url]); return ;};export default PdfPreview;

如果不想使用 PDF.js，也可以通过 iframe 嵌入 PDF 文件，并通过特定参数来禁用下载功能。

当检测到文件为 PDF 时，使用 iframe 进行嵌入，并添加 #toolbar=0 参数来禁用工具栏（包括下载按钮）。

if (record.name.endsWith('.pdf')) { const pdffileUrl= new URL(API_BASE_URL_PRO).origin; // window.open(pdfFileUrl, '_blank'); 或者使用打开新窗口方式 const fileUrl = `${baseUrl.replace(/:\d+$/, ':3100')}/api/common/file/download?fileId=${record.fileId}&bucketName=dataset#toolbar=0`; const previewModal = Modal.info({ title: ( <> 文件预览 {record.name} ), content: ( ), footer: null, width: '75%', style: { top: 35 }, closable: true, onCancel: () => previewModal.destroy(), }); return;}

选择适合你项目需求的方法进行实现即可。如果你希望有更高的定制性和更好的用户体验，推荐使用 PDF.js。如果你希望实现简单快捷，可以选择 iframe 方法。

到此这篇关于前端实现pdf文件预览操作步骤方法的文章就介绍到这了,更多相关前端pdf文件预览内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

上一篇：React 应用中的 CSS 键盘记录器攻击问题

下一篇：JavaScript遍历对象并获取key和value的几种