Vue 从 Base64 预览 PDF

date
Apr 12, 2022
slug
vue-pdf
status
Published
tags
vue
summary
记录用 vue-pdf 预览 pdf 遇到的坑
type
Post
Language

如果不需要用 Electron 打包

直接用 iframe 嵌入
  • toolbar=0 移除菜单栏
  • href pdf base64
href 格式 data:application/pdf;base64, + base84
<iframe
	:src="href + '#toolbar=0'"
	width="100%"
	height="100%">
</iframe>

需要用 Electron 打包

安装 vue-pdf

指定版本为了解决 Cannot read properties of undefined (reading 'catch') 报错
npm install vue-pdf@4.2.0

npm install pdfjs-dist@2.5.207

使用

<tempalte>
	<pdf
		v-if="href !== null"
		ref="pdf"
		:src="pdfSrc"/>
</tempalte>

<script>
	import pdf from 'vue-pdf';
	export default {
    components: {pdf},
    data() {
			herf: null
		}
		// ... 请求 href
	}
</script>

解决无法显示中文

computed: {
	pdfSrc() {
		return pdf.createLoadingTask({
			url: this.href,
			cMapUrl: 'https://cdn.jsdelivr.net/npm/pdfjs-dist@2.5.207/cmaps/',
			cMapPacked: true
		});
	}
}

解决无法显示印章

ctrl + left 点击 import pdf from 'vue-pdf' 的 vue-pdf 进入源代码
<style src="./annotationLayer.css"></style>
<script>

	import componentFactory from './componentFactory.js'

	if ( process.env.VUE_ENV !== 'server' ) {

		var pdfjsWrapper = require('./pdfjsWrapper.js').default;
		var PDFJS = require('pdfjs-dist/es5/build/pdf.js');

		if ( typeof window !== 'undefined' && 'Worker' in window && navigator.appVersion.indexOf('MSIE 10') === -1 ) {

			var PdfjsWorker = require('worker-loader!pdfjs-dist/es5/build/pdf.worker.js');
			PDFJS.GlobalWorkerOptions.workerPort = new PdfjsWorker();
		}

		var component = componentFactory(pdfjsWrapper(PDFJS));
	} else {

		var component = componentFactory({});
	}

	export default component;
</script>
进入 pdf.worker.js 注释掉 _this3.setFlags(_util.AnnotationFlag.HIDDEN);

依赖包打补丁

  • 安装 patch-package
      • npm install patch-package
  • 生成补丁文件
      • npx patch-package vue-pdf
  • 把补丁补丁应用到 node_modules
      • npx patch-package
 

© chobit blog 2025