2017-01-18 17 views
6

Tôi đang cố gắng xoay thẻ đối tượng chứa PDF được Acrobat Plugin xem qua AcroPdf.dll.Xoay thẻ đối tượng (PDF) trong Javascript

Tôi đã nhìn thấy giải pháp this nhưng không xoay PDF cứ vào> = IE9 (hoạt động trên Chrome)

Tôi đang sử dụng jQuery 1.11.3 và PDFObject 1.2 và tôi không thể thay đổi phiên bản của jQuery.

Hiệu quả là thế này: after click the "object" is rotated, not the content

Tôi muốn điều này: in chrome also the pdf is rotated

Bất kỳ trợ giúp sẽ được đánh giá cao. Trân

mã đơn giản của tôi là thế này:

<!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

Bạn có '-ms-transform: rotate (90);' trong kiểu của bạn cho '.rotate-90'. Điều này sẽ là '-ms-transform: rotate (90deg);' (lưu ý ** deg **). Cũng tham khảo [câu hỏi này] (http://stackoverflow.com/q/4865167/962603). Điều đó có khắc phục được sự cố của bạn không? –

+0

@Chỉ cần bạn đúng, nhưng đó là một thử nghiệm. Tôi đặt deg và không hoạt động. –

+0

@Justastudent tôi sẽ thử liên kết –

Trả lời

0

Hãy thử mã này:

$('#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>

Lưu ý: thay thế "pdf.pdf" với tên của pdf của bạn .

Về cơ bản những gì mã này đang làm là thông báo cho trang khi bạn nhấp vào nút, nó sẽ thêm lớp "xoay-90" vào phần tử. CSS cho trang biết rằng bất kỳ phần tử nào có lớp "rotate-90" sẽ được xoay 90 độ. Khi lớp được nối, phần tử được xoay 90 độ.

Hy vọng điều này sẽ hữu ích!

Các vấn đề liên quan