2017-01-18 10 views
6

Próbuję obrócić znacznik obiektu, który zawiera plik PDF wyświetlany przez wtyczkę Acrobat za pośrednictwem pliku AcroPdf.dll.Obróć znacznik obiektu (PDF) w JavaScript

ja już widziałem this rozwiązanie, ale nie obracać sam PDF na> = IE9 (działa w Chrome),

używam jQuery 1.11.3 i PDFObject 1.2 i nie mogę zmienić wersję jQuery.

Efekt jest taki: after click the "object" is rotated, not the content

Chcę to: in chrome also the pdf is rotated

Każda pomoc będzie mile widziane. Pozdrowienia

mój prosty kod jest taka:

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.rotate-90 { 
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.00000000, M12=-1.00000000, M21=1.00000000, M22=0.00000000,sizingMethod='auto expand')"; 
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.00000000, M12=-1.00000000, M21=1.00000000, M22=0.00000000,sizingMethod='auto expand'); 
    transform: rotate(90deg); 
    -o-transform: rotate(90deg); 
    -ms-transform: rotate(90deg); 
    -webkit-transform: rotate(90deg); 
    -moz-transform: rotate(90deg); 
} 
</style> 
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script type="text/javascript" src="http://miorepository.altervista.org/pdfobject.js"></script> 
</head> 

<body> 
<button onclick="rotatePdf();">Rotate 90 degree</button> 
<div id="boxPdf"></div> 

<script type='text/javascript'> 
      $(function(){ 

       var pdfPath = './doc1.pdf'; 

       var customParameter = { 
        page : '1', 
        view : 'FitH,0', 
        pagemode : 'none', 
        scrollbars : '0', 
        toolbar : '0', 
        statusbar : '0', 
        messages : '0', 
        navpanes : '0' 
       }; 

       var myPDF = new PDFObject({ 
            url : pdfPath, 
            pdfOpenParams : customParameter, 
            cid : 'objectBoxPdf' 
           }).embed('boxPdf'); 
      }); 

      function rotatePdf(){ 
       $('#objectBoxPdf').toggleClass('rotate-90'); 
      } 
</script> 
</body> 
</html> 
+0

Masz '-ms-transform: rotate (90);' w swoim stylu dla '.rotate-90'. Powinno to być '-ms-transform: rotate (90deg);' (zwróć uwagę na ** deg **). Zobacz także [to pytanie] (http://stackoverflow.com/q/4865167/962603). Czy to rozwiązuje twój problem? –

+0

@Justastudent masz rację, ale to był test. Umieściłem deg i nie działa. –

+0

@Justastudent spróbuję link –

Odpowiedz

0

Spróbuj kod:

$('#button').click(function() { 
 
    $('#example').addClass('rotate-90'); 
 
});
.rotate-90 { 
 
    transform: rotate(90deg); 
 
    -webkit-transform: rotate(90deg); 
 
    -ms-transform: rotate(90deg); 
 
} 
 

 
#example { 
 
    width: 400px; 
 
    height: 400px; 
 
    border: 1px solid #000; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> 
 
<div id="example"> 
 
    <object width="400px" height="400px" data="pdf.pdf"></object> 
 
</div> 
 
<button id="button">Rotate 90 degrees</button>

Uwaga: zastąpić "pdf.pdf" z nazwą swojej pdf .

Zasadniczo to, co robi ten kod, oznacza stronie, że po kliknięciu przycisku powinna dołączyć klasę "obrót-90" do elementu. CSS informuje stronę, że każdy element z klasą "obrót-90" powinien być obrócony o 90 stopni. Gdy klasa jest dołączana, element jest obracany o 90 stopni.

Mam nadzieję, że to pomoże!