axios 预览doc acrobat 预览

甲方：实现方正PDF文字大样校对，校对后在360浏览器中新开一个页面在线预览PDF文字大样校对结果。

我方实现过程：

1.方案选择

• 方案零：使用浏览器自带的PDF阅览器，经测试360极速模型,谷歌等软件能预览但是标记的PDF内容提示乱码，经测试IE浏览器和Microsoft Edge和360兼容可以；但甲方爸爸说他们习惯使用360，放弃方案该方案；

原因：360极速模型,谷歌使用谷歌内核阅览，IE浏览器和Microsoft Edge和360兼容使用IE内核，它自带adobe，不使用360兼容是因为该模式下网页内容乱码，至于为什么，我猜是当初设计是没考虑。

该过程穿插着联系方正售后，方正售后技术人员说他们还未实现过PDF校对大样的在线预览，可以尝试下载本预览。突然感觉又是乙方了！！！

一起研究了一下，他们实现标记大样批注的时候使用了某某某格式字体，当前浏览器使用谷歌内核不能解析该字体。

• 方案一：使用PDF.js，能预览但是标记的PDF内容提示乱码，放弃该方案。
• 方案二：结果wps在线或office在线，成本较高，放弃该方案
• 方案三：经过调研发现甲方电脑都有安装adobe的PDF阅览工具，因此设计了360浏览器中默认使用adobe的PDF阅览。

2.方案三实现过程：

• 1.安装readerdc_cn_ka_cra_mdr_install.exe
• 2.下载360浏览器，https://browser.360.cn/se/



• 3.以上安装成功后，找点360浏览器设置-》高级设置-》网页内容高级设置-》插件-》停用单个插件-》确定页面中是否有“Adobe Acrobat”-》同时停用“Chromium PDF Viewer”-》关闭浏览器，再重新打开。





• 
  



• 
  



• 
  



• 4.可以阅览了，测试了好几个系统，可以实现该功能。

3.后续问题

• 1.实施现场发现win7系统该过程操作没问题，但win10系统就遇到 pdf阅览只能显示整个页面高度的1/5，如下图所示。

为什么会出现该问题，我也没想清楚。

• 2.处理过程：
  将页面height设置100vh，铺满整个页面说明是没设置默认高度。 排查了一下当初的代码实现：

window.open(pdfUrl); //在新的窗口中打开链接

改进思路：

var pdfUrl = "your_pdf_url"; // 替换为您的PDF文件地址

  var newWindow = window.open(); //在新的窗口中打开链接

  newWindow.document.write("<object type='application/pdf' data='" + pdfUrl + "' width='100%' height='800px'></object>"); //在新窗口中插入PDF对象，并将页面高度设置为800像素

  newWindow.onload = function() {
    newWindow.document.getElementsByTagName("object")[0].contentWindow.AdobeDC.ViewSDK.PDFViewer.setViewMode({
      zoom: "FitWidth" //将缩放比例设置为适合宽度
    });
  };

这段代码将在页面中单击该按钮时打开一个新窗口，并在其中加载指定的链接。在新窗口中，我们插入了一个元素，将其类型设置为application/pdf，并将其数据设置为PDF文件的URL地址。然后将其添加到新窗口中，并将页面高度设置为800像素。
最后，我们在新窗口的onload事件中调用AdobeDC.ViewSDK.PDFViewer.setViewMode()方法，将缩放比例设置为适合宽度。这将确保PDF文件在窗口中正确显示，并且不会有任何溢出或截断。

• 3.结束