rox-react-pdf

import RenderPdf from 'rox-react-pdf'

RenderPdf.setup(new URL('pdfjs-dist/build/pdf.worker.min.js', import.meta.url).toString())
const options = {
	cMapUrl: '/cmaps/',
	standardFontDataUrl: '/standard_fonts/',
};
const PreviewPdf = () => {
	return (
		<div>
			<RenderPdf filePath={`/小厨房说明书.pdf`} pageGap={'0'} options={options} maxWidth={1200}/>
		</div>
	)
}

export default PreviewPdf

const cMapsDir = path.join(path.dirname(require.resolve('pdfjs-dist/package.json')), 'cmaps');
const standardFontsDir = path.join(path.dirname(require.resolve('pdfjs-dist/package.json')), 'standard_fonts');

...
new CopyWebpackPlugin({
	patterns: [
		{ from: cMapsDir, to: 'cmaps/' },
		{ from: standardFontsDir, to: 'standard_fonts/' },
	]
})

vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'node:path'
import { createRequire } from 'node:module'
import { viteStaticCopy } from 'vite-plugin-static-copy'

const require = createRequire(import.meta.url)
const cMapsDir = path.join(path.dirname(require.resolve('pdfjs-dist/package.json')), 'cmaps')
const standardFontsDir = path.join(
	path.dirname(require.resolve('pdfjs-dist/package.json')),
	'standard_fonts',
)

// https://vitejs.dev/config/
export default defineConfig({
	plugins: [
		react(),
		viteStaticCopy({
			targets: [
				{ src: cMapsDir, dest: '' },
				{ src: standardFontsDir, dest: '' },
			],
		}),
	],
})