Вращающийся встроенный PDF в html5

Question

Я отображения PDF на веб-странице с помощью HTML5 и CSS3:

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

Фактический файл изменяется в зависимости от выбора и добавления пользователей на веб-странице, но учитывая контекст, я знаю, что в большинстве случаев пользователю придется вращать pdf-файл, чтобы понять его. Обычно это легко сделать вручную, щелкнув правой кнопкой мыши и выбрав «rotate». Однако, поскольку я знаю, что это необходимо, я хочу представить их повернутыми. Единственный способ, который я нашел до сих пор, - использовать css transform, но это также вращает меню и полосу прокрутки, которую я не хочу.

Есть ли способ, используя css или javascript, чтобы сообщить браузеру применить поворот к встроенному pdf? В основном я нуждаюсь в этом, чтобы работать с Chrome, поэтому решение для браузера в порядке.

Answer 1

В Chrome вы можете использовать Ctrl +], чтобы повернуть по часовой стрелке и Ctrl + [вращаться против часовой стрелки

EDITED

Если вам нужно сделать это с помощью сценария, то, вероятно, вы могли бы использовать 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); 

Я испытал это, и это работает для всех текущих версий Firefox, Chrome, IE и Safari. Надеюсь, это поможет.