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静态资源位置位于

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

相关推荐
晓得迷路了29 分钟前
栗子前端技术周刊第 94 期 - React Native 0.81、jQuery 4.0.0 RC1、Bun v1.2.20...
前端·javascript·react.js
江城开朗的豌豆29 分钟前
React Native 实战心得
javascript
HAPPY酷29 分钟前
给纯小白的Python操作 PDF 笔记
开发语言·python·pdf
江城开朗的豌豆38 分钟前
React状态更新踩坑记:我是这样优雅修改参数的
前端·javascript·react.js
阿珊和她的猫1 小时前
autofit.js: 自动调整HTML元素大小的JavaScript库
开发语言·javascript·html
阿珊和她的猫5 小时前
v-scale-scree: 根据屏幕尺寸缩放内容
开发语言·前端·javascript
gnip11 小时前
vite和webpack打包结构控制
前端·javascript
烛阴12 小时前
前端必会:如何创建一个可随时取消的定时器
前端·javascript·typescript
萌萌哒草头将军13 小时前
Oxc 最新 Transformer Alpha 功能速览! 🚀🚀🚀
前端·javascript·vue.js
1024小神15 小时前
nextjs项目build导出静态文件
前端·javascript