小菜狗记录下解决妥协问题的爬坑过程

尝试

1️⃣ 首先考虑现成插件，找到了vue-pdf-signature

安装后报错，查询后发现应该可能和webpack版本有关系，遂放弃❌

Cannot read property 'thisCompilation' of undefined

Cannot read property thisCompilation of undefined 错误

2️⃣ 很多文章提到的修改源码的方式

全局搜索代码 setFlags(_util.AnnotationFlag.HIDDEN) 后逐一注释尝试

发现是node_modules/vue-pdf/node_modules/pdfjs-dist/build/pdf.worker.js 中的注释就可以

但需要下载插件打包依赖代码，感觉麻烦，遂放弃

后面尝试了其他发现不行后面又倒回来尝试这个，发现❌，改的代码是依赖包的node_modules，patch-package检测不到

移动端pdf预览-水印&电子签章问题

vue-pdf不显示电子签章

3️⃣ 单独拷出node_modules中的文件修改，后覆盖方法

不行，应该感觉是vue-pdf的版本有问题，放弃❌

vue-pdf无法展示第三方电子签章问题解决方案

最终

直接下载pdfjs引入

包好大14M，还不如直接引vue-pdf包到项目再改源码，遂放弃❌

又尝试了下，就样式不对，有pdf阅读器的菜单

vue使用pdfjs

找了一圈，还是这个行，就修改了下样式将就用

static/js/pdf/web/viewer.html

<!-- 禁用复制和右键 -->
<body tabindex="1" class="loadingInProgress"
      oncontextmenu="return false"
      ondragstart="return false"
      onselectstart="return false"
      onselect="document.selection.empty()"
      οncοpy="document.selection.empty()"
      onbeforecopy="return false"
      οnmοuseup="document.selection.empty()">

<!-- 隐藏工具栏 -->
<div style="display: none" class="toolbar">

static/js/pdf/web/viewer.css

body {
  height: 100%;
  width: 100%;
  /*去掉背景黑色*/
  /*background-color: #404040;*/
  /*background-image: url(images/texture.png);*/
}

问题

不能自动撑开高度，超过设定的固定高度后有滚动条

文档宽度也不能过窄，样式还是受限的

总之还是自己太菜，这个都搞了一上午☹还完全没得自己代码，全是别个的

版本

"vue": "^2.5.2",
"webpack": "^3.6.0",
"vue-pdf": "4.0.7",  // 高版本报错，实际上也没用上

【工作记录】vue-pdf带签章预览

尝试

最终

问题

版本