產品需求
????????在網頁中展示PDF文件，每次展示一頁，通過按鈕進行翻頁。
思路分析
????????之前網站功能分別使用vue-pdf和pdfjs-dist實現過，但渲染速度都特別慢，所以想試試foxit pdf插件。網站只是用插件單頁展示PDF文件，功能簡單，在官網提供的插件包里也有只渲染單頁的示例代碼，稍加改動后即可使用，但實施過程中發現有許多坑，于是想找官方文檔，費了好一番功夫才找到一個中文文檔，但發現里面也沒有詳細的參數配置說明，所以只能自行摸索。
過程經歷
? ??????問題1
????????根據項目需求，讓PDF的寬度撐滿父盒子是比較理想的，而在PDFViewer的配置項中有一個defaultScale字段，是與PDF的顯示尺寸相關的。defaultScale的取值為數字或字符串，因為沒有明確的官方說明，所以只能試，已知的可取值為：fitWidth（默認值）、fitHeight、數字（縮放比例）。
????????其中fitWidth比較符合需求，但實際操作時，當取值fitWidth（fitHeight也是）時，頁面總是會出現滾動條。
????????從控制臺可看到html上有一個“--facing-margin: 8px;”，如果在控制臺將該樣式去除（或將主dom元素display設為block）則滾動條會符合預期，于是做了如下嘗試：
????????1）新增CSS樣式，將--facing-margin覆蓋為0px，發現問題依舊；
????????2）直接在庫代碼中（js文件和css文件中各一處）將--facing-margin值改為0px，發現問題依舊；
????????3）將主dom元素display設為block，問題依舊；
????????4）將比例調小（比如將defaultScale設為0.95），可解決問題，但取值不好控制；
????????5）在上面的測試過程中，發現將--facing-margin改為0px后，再觸發滾動事件后，可以觸發頁面重新計算，這時滾動條會變得符合預期。所以在PDF文件加載完成后用代碼觸發滾動事件，問題解決。
? ??????問題2
????????當將調整后的Demo代碼移植到實際項目以后，PDF計算后的尺寸并非是父盒子的寬度，而是網頁視窗窗口的寬度。又因為PDF的父盒子大小與視窗大小沒有固定的比例關系，所以考慮將PDF的顯示放在一個單獨頁面中，再用iframe嵌入網頁中進行使用。
????????不過，這樣做的話，iframe的高度不會根據內容去自動調整，所以只能人為調整。此處使用的方案是：iframe打開PDF文件后，通過postMessage將PDF的尺寸信息和頁碼總數發給外層窗口，外層收到尺寸信息后再修改iframe的高度。
? ??????問題3
????????將iframe嵌入網頁后，當PDF翻頁時，發現iframe時而有滾動條時而沒有，時而PDF是撐滿網頁的，時而又與邊框存在間隙。
????????在控制臺可以看到PDF的尺寸閃爍是因為每次翻頁時都會重新計算寬度，而當某次因為某些原因產生滾動條后，滾動條會壓縮網頁的有效寬度，那么下次翻頁時計算的寬度就會偏小，于是又會出現間隙（如圖所示，間隙大約8px，默認的滾動條寬16px，所以大體可以猜到原因）。
????????解決辦法是直接在iframe網頁中將html的overflow直接設為hidden，這樣就可以避開滾動條對尺寸計算產生的影響。那這樣改了以后會不會影響上一步postMessage中的PDF高度尺寸呢？實測的結果是不會。如下圖所示，overflow:hidden不會影響scrollHeight等信息（圖片中的渲染效果是在控制臺人為修改的，非瀏覽器自動渲染，正常的頁面高度不會缺損）。
最終結果
????????初始化時，因為要下載PDF文件，速度慢些；之后的操作還是比較流暢的，效果還可以。
