React项目批量PDF书籍无法下载问题求助

问题根源 #

你当前的代码手动拼接了PDF文件的相对路径，但Webpack在打包时会对资源文件进行哈希命名和路径重写，直接拼接的路径无法匹配打包后的实际资源位置。而手动导入单本PDF时，Webpack会自动处理资源路径，生成正确的访问URL，所以能正常下载。

修复方案 #

利用require.context返回的函数，传入文件路径即可获取Webpack处理后的资源URL，替代手动拼接的路径。具体修改如下：

修改后的Books.js代码 #

import { useState, useEffect } from 'react';
export default function Books() {

const [books, setBooks] = useState([]);

useEffect(() => {
    const importBooks = async () => {
        try {
            const bookContext = require.context("../../assets/books", false, /\.pdf$/);

            const bookFiles = bookContext.keys().map((filename, index) => {
                console.log('File path:', filename);
                const title = filename.replace(/^\.\/|NotesForProfessionals/g, '').replace(/\.pdf$/, '');
                // 关键修改：调用bookContext获取Webpack处理后的资源URL
                const downloadUrl = bookContext(filename);
                return {
                    id: index + 1,
                    title,
                    author: "goalkicker",
                    download_link: downloadUrl,
                };
            });

            console.log('Books:', bookFiles);
            setBooks(bookFiles);
        } catch (error) {
            console.error('Error importing books:', error);
        }
    };

    importBooks();
}, []);

return (
    <>
        <div className="books_container" id="books_container">
            <header>Explore Books</header>
            
            <div className="books">
                {books.map(book => (
                    <div className="book_bg" key={book.id}>
                        <div className="book">
                            <p className="book_title">{book.title}</p>
                            <p className="author">by {book.author}</p>
                            <a
                                download={book.title + '.pdf'} {/* 可选：指定下载后的文件名 */}
                                href={book.download_link}
                                className="download_btn download_link"
                            >
                                Download
                            </a>
                        </div>
                    </div>
                ))}
            </div>
        </div>
    </>
);
}

关键修改点 #

• 替换手动拼接的download_link为bookContext(filename)，这个函数会返回Webpack处理后的资源绝对URL（比如/static/media/bookName.hash.pdf）
• 可选：给<a>标签的download属性指定文件名，确保下载的文件名称符合预期

原理说明 #

require.context不仅能获取目录下的文件路径列表，返回的函数还能接收文件路径作为参数，触发Webpack的资源处理流程，生成正确的打包后资源地址。这样无论是开发环境还是生产环境，下载链接都能指向正确的资源位置。

内容的提问来源于stack exchange，提问作者VINCENT REDDY