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

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

相关推荐
界面开发小八哥16 小时前
数据可视化图表库LightningChart JS v8.0上线:全新图例系统 + 数据集重构
javascript·信息可视化·数据可视化·lightningchart
烛阴16 小时前
【TS 设计模式完全指南】从“入门”到“劝退”,彻底搞懂单例模式
javascript·设计模式·typescript
正义的大古16 小时前
OpenLayers常用控件 -- 章节六:全屏控件教程
前端·javascript·html·openlayers
正义的大古18 小时前
OpenLayers常用控件 -- 章节七:测量工具控件教程
前端·javascript·vue.js·openlayers
雲墨款哥19 小时前
一个前端开发者的救赎之路-JS基础回顾(五)-数组
前端·javascript·面试
朱程19 小时前
深入JS(一):手写 Promise
前端·javascript
EndingCoder20 小时前
Electron 性能优化:内存管理和渲染效率
javascript·性能优化·electron·前端框架
牛十二20 小时前
mac-intel操作系统go-stock项目(股票分析工具)安装与配置指南
开发语言·前端·javascript
janthinasnail1 天前
使用Docker安装Stirling-PDF(PDF工具)
docker·pdf
kk不中嘞1 天前
浅谈前端框架
前端·vue.js·react.js·前端框架