HTML PDF 뷰어 개체 사용 안 함

Question

내 페이지에 PDF 파일을 포함 시켰으며 해당 개체와 상호 작용할 수없는 방식으로 개체를 사용하지 않도록 설정했습니다 (스크롤 할 필요없이 확대/축소 없음). 내 html 개체는 다음과 같습니다.

<div id="pdf"> 
     <object width="650" height="500" type="application/pdf" data="./forms/my.pdf?#zoom=45&scrollbar=0&toolbar=0&navpanes=0" id="pdf_content"> 
      <p>PDF could not be loaded.</p> 
     </object> 
    </div> 

개체를 비활성화 할 수 있습니까?

Answer 1

당신의 PDF 페이지로드에 의도 단순히 마우스 상호 작용을 방지하기 위해 원하는대로 렌더링하는 경우, 당신은 너무 CSS와 같은 눈에 보이지 않는 요소를 은폐 할 수

#pdf { 
    position: relative; 
} 

#pdf::before { 
    content: ''; 
    position: absolute; 
    top: 0; 
    right: 0; 
    left: 0; 
    bottom: 0; 
    z-index: 1; 
    background: rgba(0, 0, 0, .3); 
} 

그리고 당신의 요청에 따라하는을 (jQuery를 사용하여)이 온/오프를 전환하는 방법 :

$('#toggle').on('click', function() { 
 

 
    if ($('#pdf').hasClass('enable')) { 
 

 
    $('#pdf').removeClass('enable').on('mousedown scroll', function() { return false; }); 
 
    $(this).text('Enable PDF Interaction'); 
 

 
    } else { 
 

 
    $('#pdf').addClass('enable').off(); 
 
    $(this).text('Disable PDF Interaction'); 
 

 
    } 
 
});

#pdf { 
 
    position: relative; 
 
    /* sizes for example since PDF won't load: */ 
 
    width: 650px; 
 
    height: 500px; 
 
} 
 
#pdf::before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    z-index: 1; 
 
    background: rgba(0, 0, 0, .3); 
 
} 
 
#pdf.enable::before { 
 
    content: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<button id="toggle">Disable PDF Interaction</button> 
 

 
<div id="pdf" class="enable"> 
 
    <object width="650" height="500" type="application/pdf" data="https://upload.wikimedia.org/wikipedia/en/d/dc/Convergent_Synthesis_Example.pdf" id="pdf_content"> 
 
    <p>PDF could not be loaded.</p> 
 
    </object> 
 
</div>