以Bootstrap模式顯示PDF

我真的很苦惱於簡單的事情。我想實現的僅僅是在Bootstrap模式中使用HTML <object>標籤顯示PDF。以Bootstrap模式顯示PDF

I've created Plunkr來證明問題。基本上在「工作PDF」是簡單的<object>標記，它工作正常。在「工作PDF - 崩潰」下面是摺疊後的PDF div和「不工作PDF - 模式」演示了這個問題。

我想也許問題是與display: none;，但摺疊示例工程，所以它不能與可見性有關。在使用一些原生PDF查看器的Chrome上，一切正常。我的Firefox使用Adobe插件，但是當我切換回pdf.js查看器時 - 一切都按預期工作。

我還發現this example，它演示了在Javascript函數中創建HTML時，以模式顯示PDF工作正常。但我不能理解這與我正在嘗試做的事情有什麼不同。

來源

2017-07-13 Paweł Hemperek

選中此項。。 https://bootsnipp.com/snippets/P3Vvm –

@RïshïKêshKümar好吧...我確實檢查過它，因爲我在我的問題中鏈接了一些非常相似的東西。我不確定你的鏈接應該如何幫助我。 –

確定確定........ –

我設法解決了我自己的問題。事實證明，CSS動畫引起了這種意想不到的行爲。在modals.less有樣式聲明

.modal{ 
    &.fade .modal-dialog{ 
     .translate(0, -25%); 
     .transition-transform(~"0.3s ease-out"); 
    } 
    &.in .modal-dialog { .translate(0, 0) } 
}

這些轉換.translate(0, -25%);和.translate(0, 0)導致問題，所以我決定宣佈自己混入

.translate-none(){ 
    -webkit-transform: none; 
     -ms-transform: none; // IE9 only 
     -o-transform: none; 
      transform: none; 
}

，並用它來代替那些帶有動畫的

.modal{ 
    &.fade .modal-dialog { 
    .translate-none(); 
    .transition-transform(~"0.3s ease-out"); 
    } 
    &.in .modal-dialog { .translate-none() } 
}

This disables Bootstrap modal animation，但允許PDF渲染

來源

2017-07-14 12:35:55

以Bootstrap模式顯示PDF

回答

相關問題