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

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

相关推荐
背太阳的牧羊人11 分钟前
使用 PyMuPDF(fitz)库打开 PDF 文件,并且是从内存中的字节流(BytesIO)读取 PDF 内容
数据库·pdf·文件处理·pymupdf·fitz
灯火不休ᝰ18 分钟前
前端处理pdf文件流,展示pdf
前端·pdf
lvbb6635 分钟前
框架修改思路
前端·javascript·vue.js
qq_4560016537 分钟前
43、接口请求需要时间,导致页面初始加载时会出现空白,影响用户体验
javascript·vue.js·ux
try again!43 分钟前
rollup.js 和 webpack
开发语言·javascript·webpack
逆袭的小黄鸭1 小时前
JavaScript:作用域与作用域链的底层逻辑
前端·javascript·面试
FanetheDivine1 小时前
实现"选中表格项将元素加入集合"的动画效果
javascript·vue.js
前端Hardy1 小时前
HTML&CSS:超好看的轮播图,你绝对用得上(建议收藏)
javascript·css·html
傻球1 小时前
Jotai 使用详解:React 轻量级状态管理库
前端·react.js
Linhieng1 小时前
JS 解析 png 图片的分辨率(宽高)
javascript