#javascript #html #vue.js #pdf #rendering
#javascript #HTML #vue.js #PDF #рендеринг
Вопрос:
Я создаю простой компонент просмотра PDF в приложении Vue и хотел сделать его как можно более простым, просто используя встроенный в браузер просмотрщик PDF, не полагаясь на внешние библиотеки. Код, который показывает PDF, выглядит примерно так:
...
<embed
:src="pdfResource"
type="application/pdf"
width="500px"
height="500px"
>
...
Где pdfResource — это строка base64 для PDF, которая динамически получается из веб-службы, поскольку эти файлы являются частными.
Проблема в том, что некоторые PDF-файлы отображаются неправильно, отображая только пробел без загрузки программы просмотра PDF в Chrome 86 и Safari 14, но отображаются правильно в Firefox 81. Я создал JSfiddle, воспроизводящий проблему со случайным PDF-файлом, найденным в Интернете
https://jsfiddle.net/26vLc3u0/2/
Я безуспешно пытался использовать теги object и iframe, и я хотел бы избежать необходимости использования внешних библиотек. Обратите внимание, что я не хочу открывать PDF-файл на новой вкладке или создавать ссылку для его загрузки, PDF-файл должен быть полностью отображен внутри компонента
заранее спасибо!
Комментарии:
1. Я вижу, что PDF-файл в порядке в Safari 13 и Chrome85 на IOS, это только более поздние версии, которые вызывают проблему?
2. Привет, извините за задержку. Я могу видеть PDF-файлы в Safari 14 и Chrome 86 на iOS 14, но их настольные версии (в Windows и macOS) ничего не показывают. Пробовал Chrome 84 в Windows 10, и это тоже не сработало
3. Теперь протестировано на Windows10 — Edge, Chrome, Firefox и (даже!) IE11 и все показывают pdf нормально — хотя некоторые неохотно прокручивают его в jsfiddle, все они будут, если я использую локальный код. Извините, что не очень помог. Может ли что-то быть в Adobe Reader на вашем Windows m / c (я не знаю, как браузеры получают к нему доступ и действительно ли они это делают).
4. Такая же проблема с Chrome 99.0.4844.83