Откройте созданный jsPDF pdf в новой вкладке / окне Chrome - PullRequest
Новая
       9

Откройте созданный jsPDF pdf в новой вкладке / окне Chrome

0 голосов
/ 08 февраля 2019

Как открыть ссылку javascript data:application/pdf;filename=generated.pdf;base64;DATA в Chrome 71?
Ссылка с консоли открылась успешно, но не из кода - к сожалению.
Фрагмент не работает по соображениям безопасности.Только для демонстрации кода.
Я прочитал несколько похожих вопросов, но не нашел ответа.

enter image description here

var button = document.getElementById("button");

button.addEventListener("click", generate, false);

function generate() {

  var doc = new jsPDF({
    orientation: "l",
    unit: "mm"
  });

  doc.text('ACT', 130, 20);
  var string = doc.output('datauristring');
  console.log(string);
  var link = document.createElement('a');
  link.href = string;
  link.setAttribute('target', '_blank');
document.body.appendChild(link);
  link.click();
  link.parentNode.removeChild(link);
}
<script src="https://unpkg.com/jspdf@1.5.3/dist/jspdf.min.js"></script>
<button id="button">Generate pdf table</button>

Ответы [ 5 ]

0 голосов
/ 12 августа 2019

Этот код у меня работает 

  var doc = new jsPDF();
  doc.setProperties({
  title: "new Report"
  });
  doc.output('dataurlnewwindow');
0 голосов
/ 11 февраля 2019

Это на самом деле очень просто, не усложняйте вещи .. 

window.open(URL.createObjectURL(doc.output("blob")))

или более подробный и менее эффективный версия: 

let newWindow = window.open('/');
fetch(doc.output('datauristring')).then(res => res.blob()).then(blob => {
    newWindow.location = URL.createObjectURL(blob);
})

(Вынужно открывать новое окно сразу после нажатия кнопки мыши, иначе Chrome заблокирует всплывающее окно. Это решение не так хорошо, поскольку происходит ненужное преобразование из datauri в blob)

0 голосов
/ 08 февраля 2019

Попробуйте window.open() вместо.Следующий код работал для меня.Вам нужно будет изменить размер окна / страницы. 

let dataSrc = pdf.output("datauristring");
let win = window.open("", "myWindow");
win.document.write("<html><head><title>jsPDF</title></head><body><embed src=" + 
    dataSrc + "></embed></body></html>");

Обновление:

Не понял, что jsPDF поставляется со встроенным методом pdf.output('dataurlnewwindow');, который использует iframe ,

Недостатком pdf.output('dataurlnewwindow') является то, что он открывает новую вкладку / окно с datauristring в качестве имени файла PDF и кнопки загрузкине работает, в то время как window.open(pdf.output('bloburl')) выглядит нормально с кнопкой загрузки.

Хорошо, файл PDF можно переименовать так: 

pdf.setProperties({
    title: "jsPDF sample"
});

Обновление 2:

Чтобы избежать обрезки страницы при ее увеличении, можно принудительно вернуть уровень масштабирования обратно до 100% и соответственно установить масштаб html2canvas.

0 голосов
/ 08 февраля 2019

Я запускаю код из вопроса на локальном компьютере и принимаю эту ошибку:

Не разрешается перемещать верхний фрейм к URL-адресу данных: данные: приложение / pdf; имя файла = генерируемый.pdf; base64;, ...

JsPDF - Не разрешается перемещать верхний фрейм к URL-адресу данных

Я попробовал предложение @WeihuiGuo.К сожалению для меня.

Я обнаружил, что Chrome автоматически открыть PDF.

https://support.google.com/chrome/answer/6213030?hl=en
https://groups.google.com/a/chromium.org/forum/#!topic/chromium-bugs/z5hA0H6LFws

И не только для новоговкладка.Не открывается и на текущей странице.
https://sphilee.github.io/jsPDF-CustomFonts-support/

В других браузерах эта страница отображается правильно.

Такие печальные новости.

0 голосов
/ 08 февраля 2019

Вы генерируете PDF из его необработанных данных, используя Javascript.Почему бы не использовать такой ридер, как Adobe, для его рендеринга?Это то, что происходит, когда вы нажимаете на ссылку из консоли.Вы можете буквально просто открыть ссылку, и она откроется в формате PDF.Я думаю, что вы, возможно, слишком усложнили эту задачу.

...