在html5中旋转嵌入式pdf

Question

我正在使用html5和css3在网页上显示一个pdf：

<embed class="pdf" src="/files/test.pdf" type="application/pdf">

实际文件取决于选择和用户上传到网页上，但考虑到上下文，我知道，在大多数情况下，用户将不得不旋转pdf来理解它。这通常很容易通过右键单击和选择“旋转”来手动完成。然而，由于我知道这是必要的，我想提出他们旋转。到目前为止，我发现的唯一方法是使用css transform，但这也会旋转菜单和滚动条，这是我不想要的。

有没有任何方法，使用css或javascript，告诉浏览器应用旋转嵌入的pdf？我主要需要这个在Chrome上工作，所以浏览器特有的解决方案是可以的。

Answer 1

在Chrome中，您可以使用Ctrl+]顺时针旋转，Ctrl+[逆时针方向旋转]

编辑的

如果您需要使用脚本执行此操作，那么您可能可以使用PDF.js在此链接上使用以下说明：https://blog.oio.de/2014/04/11/integrating-pdf-js-pdf-viewer-web-application/并在本地托管查看器以避免跨域问题

然后，您可以轻松地将查看器嵌入到页面的iframe中，并访问iframe的内容以旋转PDF。

守则如下：

var rotatedeg = 90;
var rotate_css = 
{
'-webkit-transform': 'rotate(' + rotatedeg + 'deg)',
'-moz-transform': 'rotate(' + rotatedeg + 'deg)',
'-ms-transform': 'rotate(' + rotatedeg + 'deg)',
'-o-transform': 'rotate(' + rotatedeg + 'deg)',
'transform': 'rotate(' + rotatedeg + 'deg)'
};
// my-frame is id of iframe
 $("#my-frame").contents().find("#viewer").css(rotate_css);

希望这能有所帮助。