pdf文件预览,有的文件显示空白

vue-pdf文件预览踩坑

当时做的时候我就选用了比较简单的vue-pdf插件,因为我觉得pdfjs-dist太复杂,我是不喜欢麻烦的人,然后就有了接下来的坑

1、不显示签名问题:
控制台报:1:Warning: Error during font loading: Failed to execute ‘postMessage’ on ‘Worker’: ArrayBuffer at index 0 is already detached.
2:Warning: Unimplemented widget field type “Sig”, falling back to base field type.
百度查了2,说是把pdf.worker.js中的

			// if (data.fieldType === 'Sig') {undefined
				//   _this2.setFlags(_util.AnnotationFlag.HIDDEN); } 这个段给注掉,我去注掉了以后点击预览的时候还是不显示签名,同时控制台还报这两个
然后我就加了this.pdfUrl = pdf.createLoadingTask({ url: newFlie, CMapReaderFactory }),发现不报1了,也能显示,但是只有第一次
点的时候能显示,我就接着度娘,最后有两种解决办法:
1》在CMapReaderFactory.js文件中加delete require.cache[require.resolve('./buffer-loader!pdfjs-dist/cmaps/'+query.name+'.bcmap')];
	return import('./buffer-loader!pdfjs-dist/cmaps/'+query.name+'.bcmap' /* webpackChunkName: "noprefetch-[request]" */)
	.then(function(bcmap) {
		delete require.cache[require.resolve('./buffer-loader!pdfjs-dist/cmaps/'+query.name+'.bcmap')];
		return {
			cMapData: bcmap.default,
			compressionType: CMapCompressionType.BINARY,
		};
	});
2》 修改this.pdfUrl = pdf.createLoadingTask({ url: newFlie, CMapReaderFactory })为this.pdfUrl = pdf.createLoadingTask({
                  url: newFlie,
                  cMapUrl: 'https://cdn.jsdelivr.net/npm/[email protected]/cmaps/',
                  cMapPacked: true
                }

2、放大缩小模糊的问题
开始的时候我是想用是transform来实现,结果越放大越模糊:

	scale:1,
	// 放大
    scaleD() {
       this.scale += 0.1;
     this.$refs.pdfWrapper.$el.style.transform = "scale(" + this.scale + ")";
      this.$refs.pdfWrapper.$el.style.transformOrigin = "top center";
  },
 scaleX() {
      if (this.scale === 1) {
          return;
      }
      this.scale += -0.1;
      this.$refs.pdfWrapper.$el.style.transform = "scale(" + this.scale + ")";
  },

在获取点url地址的时候重定义:

		 this.scale=1
          this.$refs.pdfWrapper.$el.style.transform = "scale(1)";

后来就改成了百分比:

		scale:100,
		scaleD() {
		          this.scale += 5;
		          this.$refs.pdfWrapper.$el.style.width = parseInt(this.scale) + "%";
		      },
		scaleX() {
		          if (this.scale === 1) {
		              return;
		          }
		          this.scale -= 5;
		          this.$refs.pdfWrapper.$el.style.width = parseInt(this.scale) + "%";
		          this.$refs.pdfWrapper.$el.style.height = parseInt(this.scale) + "%";
		      },

页面一加载的时候:

		  this.scale = 100;
          this.$refs.pdfWrapper.$el.style.width = parseInt(this.scale) + "%";

还有我从网上看到说有用iframe标签好像更简洁,功能也很全,但是我用了但是没有出来,不是把文件流直接给url吗,反正就没出来。有大佬用过iframe的文件预览,欢迎指教!

你可能感兴趣的:(vue.js,前端,elementui)