Rotate object tag (PDF) in Javascript

Question

Rotate object tag (PDF) in Javascript

3k views Asked by Manuel Spigolon At 23 November 2024 at 14:09

i'm trying to rotate an object tag that contains a PDF viewed by Acrobat Plugin via AcroPdf.dll.

I already saw this solution but don't rotate the PDF itself on >=IE9 (works on chrome)

I'm using jQuery 1.11.3 and PDFObject 1.2 and i can't change the version of jQuery.

The effect is this:

I want this:

Any help will be appreciated. Regards

My simple code is this:

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

Original Q&A

There are 1 answers

**Benjamin Hollon** · Answer 1 · 2017-06-08 08:23:51

Try this code:

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

Note: replace "pdf.pdf" with the name of your pdf.

Basically what this code is doing is telling the page that when you click the button, it should append the class "rotate-90" to the element. The CSS tells the page that any element with the class "rotate-90" should be rotated by 90 degrees. When the class is appended, the element is rotated 90 degrees.

Hope this helps!

TechQA.

Rotate object tag (PDF) in Javascript

There are 1 answers

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in PDF

Related Questions in PDFOBJECT

Popular Questions

Popular Tags

Trending Questions