欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

前端實現(xiàn)pdf文件預(yù)覽的操作步驟方法

 更新時間：2025年07月10日 09:41:33   作者：Zhang_DongL  
這篇文章主要介紹了前端實現(xiàn)pdf文件預(yù)覽的操作步驟方法,前端實現(xiàn)PDF文件流預(yù)覽可以使用多種方法,其中一種常用的方法是使用PDF.js庫,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

1. 使用 PDF.js 進行自定義預(yù)覽

PDF.js 是一個用 JavaScript 實現(xiàn)的 PDF 閱讀器，可以嵌入到網(wǎng)頁中進行 PDF 文件的預(yù)覽，并且可以自定義其功能。

步驟如下：

1. 引入 PDF.js 庫

import pdfjsLib from 'pdfjs-dist';
import 'pdfjs-dist/web/pdf_viewer';

2. 創(chuàng)建 PDF 預(yù)覽組件

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 <div ref={pdfContainer} style={{ width: '100%', height: '600px' }}></div>;
};

export default PdfPreview;

3. 使用

if (record.name.endsWith('.pdf')) {
    const baseUrl = new URL(API_BASE_URL_PRO).origin;
    const fileUrl = `${baseUrl.replace(/:\d+$/, ':3100')}/api/common/file/download?fileId=${record.fileId}&bucketName=dataset`;

    const previewModal = Modal.info({
        title: (
            <>
                文件預(yù)覽
                <span
                    style={{ fontSize: '14px', textDecoration: 'underline', marginLeft: '15px' }}
                >
                    {record.name}
                </span>
            </>
        ),
        content: <PdfPreview url={fileUrl} />,
        footer: null,
        width: '75%',
        style: { top: 35 },
        closable: true,
        onCancel: () => previewModal.destroy(),
    });

    return;
}

2. 使用 iframe 嵌入并自定義參數(shù)

如果不想使用 PDF.js，也可以通過 iframe 嵌入 PDF 文件，并通過特定參數(shù)來禁用下載功能。

步驟如下：

當(dāng)檢測到文件為 PDF 時，使用 iframe 進行嵌入，并添加 #toolbar=0 參數(shù)來禁用工具欄（包括下載按鈕）。

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: (
            <>
                文件預(yù)覽
                <span
                    style={{ fontSize: '14px', textDecoration: 'underline', marginLeft: '15px' }}
                >
                    {record.name}
                </span>
            </>
        ),
        content: (
            <iframe
                src={pdfFileUrl}
                style={{ width: '100%', height: '600px', border: 'none' }}
            ></iframe>
        ),
        footer: null,
        width: '75%',
        style: { top: 35 },
        closable: true,
        onCancel: () => previewModal.destroy(),
    });

    return;
}

選擇適合你項目需求的方法進行實現(xiàn)即可。如果你希望有更高的定制性和更好的用戶體驗，推薦使用 PDF.js。如果你希望實現(xiàn)簡單快捷，可以選擇 iframe 方法。

總結(jié)

到此這篇關(guān)于前端實現(xiàn)pdf文件預(yù)覽操作步驟方法的文章就介紹到這了,更多相關(guān)前端pdf文件預(yù)覽內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

  • 使用JS實現(xiàn)氣泡跟隨鼠標移動的動畫效果

    使用JS實現(xiàn)氣泡跟隨鼠標移動的動畫效果

    氣泡跟隨鼠標移動，并在每次點擊時產(chǎn)生不同的變化，效果非常迷人，下面小編給大家?guī)砹?，基于js實現(xiàn)的氣泡效果實例代碼，需要的朋友參考下吧
    2017-09-09
  • 微信小程序仿今日頭條導(dǎo)航欄滾動解析

    微信小程序仿今日頭條導(dǎo)航欄滾動解析

    這篇文章主要介紹了微信小程序仿今日頭條導(dǎo)航欄滾動解析,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
    2019-08-08
  • javascript檢測頁面是否縮放的小例子

    javascript檢測頁面是否縮放的小例子

    簡單寫了下，只測試了chrome，道理很簡單，其他瀏覽器自行擴充。
    2013-05-05
  • javascript+ajax實現(xiàn)產(chǎn)品頁面加載信息

    javascript+ajax實現(xiàn)產(chǎn)品頁面加載信息

    本文給大家分享的是使用javascript結(jié)合ajax實現(xiàn)產(chǎn)品頁面無刷新加載信息的代碼，非常的簡單實用，有需要的小伙伴可以參考下。
    2015-07-07
  • JavaScript簡單表格編輯功能實現(xiàn)方法

    JavaScript簡單表格編輯功能實現(xiàn)方法

    這篇文章主要介紹了JavaScript簡單表格編輯功能實現(xiàn)方法,涉及javascript操作表格的技巧,具有一定參考借鑒價值,需要的朋友可以參考下
    2015-04-04
  • js 蒙版進度條（結(jié)合圖片）

    js 蒙版進度條（結(jié)合圖片）

    js 結(jié)合圖片實現(xiàn)的蒙版進度條效果。
    2010-03-03
  • webpack源碼之loader機制詳解

    webpack源碼之loader機制詳解

    本篇文章主要介紹了webpack源碼之loader機制詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-04-04
  • DataGear開發(fā)基于three.js的3D數(shù)據(jù)可視化看板的詳細代碼

    DataGear開發(fā)基于three.js的3D數(shù)據(jù)可視化看板的詳細代碼

    DataGear?支持采用原生的HTML、JavaScript、CSS制作數(shù)據(jù)可視化看板，也支持導(dǎo)入由npm、vite等前端工具構(gòu)建的前端程序包，這篇文章主要介紹了DataGear制作基于three.js的3D數(shù)據(jù)可視化看板,需要的朋友可以參考下
    2024-02-02
  • javascript設(shè)計模式之解釋器模式詳解

    javascript設(shè)計模式之解釋器模式詳解

    這篇文章主要介紹了javascript設(shè)計模式之解釋器模式詳解,當(dāng)有一個語言需要解釋執(zhí)行，并且可以將該語言中的句子表示為一個抽象語法樹的時候，可以考慮使用解釋器模式,需要的朋友可以參考下
    2014-06-06

    • 最新評論