vite react react-pdf pdfjs-dist 加载不全的解决方案 cmaps本地路径

pdf.js 字体无法显示
pdfjs-dist加载不全的解决方案
Rollup 配置 rollup-plugin-copy插件,进行打包构建时的文件复制

参考了网上诸多解决方案,都是webpack的引入包方式,

照猫画虎,把vite解决方案奉献给大家

vite.config.js

js 复制代码
import copy from 'rollup-plugin-copy' //引入插件

// https://vitejs.dev/config/
export default defineConfig({
    base: '/',
    plugins: [
        react(),
        viteCompression(),
        copy({
            targets: [
                { src: 'node_modules/pdfjs-dist/cmaps/', dest: 'public/' }, //执行拷贝
            ]
        })
    ],
})

主文件

js 复制代码
const cmaps = new URL('/cmaps', import.meta.url).href

{<Document
    file={url}// 文件地址
    className="pdf-viewer-show"
    onLoadSuccess={onDocumentLoadSuccess}
    onLoadError={onDocumentLoadError}
    options={{
        cMapUrl: `${cmaps}/`,
        cMapPacked: true,
        // disableWorker: true,
    }}
>
    {Array.from(new Array(numPages), (el, index) => (
        <Page
            key={`page_${index + 1}`}
            pageNumber={index + 1}
            renderAnnotationLayer={false}
            renderTextLayer={false}
        />
    ))}
</Document>}

最后页面中cmps静态资源位置位于

更多详细代码请关注公众号索取(备注:公众号):

相关推荐
灵感__idea5 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
VB5946 小时前
《考研 考证 各学科 各专业 思维导图汇总》PDF 5.2GB
考研·pdf
hui函数8 小时前
掌握JavaScript函数封装与作用域
前端·javascript
Carlos_sam8 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript
小毛驴8509 小时前
创建 Vue 项目的 4 种主流方式
前端·javascript·vue.js
今禾10 小时前
前端开发中的Mock技术:深入理解vite-plugin-mock
前端·react.js·vite
你这个年龄怎么睡得着的10 小时前
Babel AST 魔法:Vite 插件如何让你的 try...catch 不再“裸奔”?
前端·javascript·vite
我想说一句10 小时前
掘金移动端React开发实践:从布局到样式优化的完整指南
前端·react.js·前端框架
码间舞10 小时前
Zustand 与 useSyncExternalStore:现代 React 状态管理的极简之道
前端·react.js
Dream耀10 小时前
提升React移动端开发效率:Vant组件库
前端·javascript·前端框架