在 Javascript 中旋转对象标签 (PDF)答案

【问题标题】：Rotate object tag (PDF) in Javascript在 Javascript 中旋转对象标签 (PDF)
【发布时间】：2017-06-03 03:40:09
【问题描述】：

我正在尝试旋转包含由 Acrobat 插件通过 AcroPdf.dll 查看的 PDF 的对象标签。

我已经看到 this 解决方案，但不要在 >=IE9 上旋转 PDF 本身（适用于 chrome）

我正在使用 jQuery 1.11.3 和 PDFObject 1.2，我无法更改 jQuery 的版本。

效果是这样的：

我想要这个：

任何帮助将不胜感激。问候

我的简单代码是这样的：

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

【问题讨论】：

你有 -ms-transform: rotate(90); 在你的风格 .rotate-90。这应该是 -ms-transform: rotate(90deg);（注意 deg）。另请参阅this question。这能解决您的问题吗？
@Justastudent 你是对的，但那是一个测试。我放了度数，但不起作用。
@Justastudent 我会试试链接
奇数。也许你也应该摆脱过滤器？或者使用我链接的问题中的过滤器？
@Justastudent 不，不工作沙变换

标签： javascript html pdf pdfobject

【解决方案1】：

试试这个代码：

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

注意：将“pdf.pdf”替换为您的 pdf 名称。

基本上，这段代码的作用是告诉页面，当您单击按钮时，它应该将类“rotate-90”附加到元素。 CSS 告诉页面任何具有“rotate-90”类的元素都应该旋转 90 度。附加类时，元素会旋转 90 度。

希望这会有所帮助！

【讨论】：