vue项目线上预览pdf可用vue-pdf完美解决,可是加上qiankun微前端后就变成巨坑了。
引入vue-pdf后,前台直接报错加载不了worker(failed to resolve async component default:securityerror:failed to construct‘worker’:script at xxxx.worker.js xannot be accessed from origin xxx ),如果直接访问单个项目则可以正常使用,结合网上多部分资料才得以解决,方法如下:

//找到vue-pdf的依赖包下的vuePdfNoSss.vue
<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');
			  var PdfjsWorker=require('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>

修改项目的配置文件vue.config.js

chainWebpack: (config) => {
    config.module
      .rule('worker')
      .test(/\.worker\.js$/)
      .use('worker-loader').loader('worker-loader')
      .options({
        inline: true,
        fallback: false
      }).end();
  }

重启项目即可通过qiankun正常访问

Logo

前往低代码交流专区

更多推荐