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/pdfjs-dist@2.5.207/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的文件预览，欢迎指教！