Comment puis-je ouvrir avec un lien javascript data: application / pdf; filename = generated.pdf; base64; DATA dans Chrome 71?
Lien depuis la console ouvert avec succès, mais pas depuis le code - malheureusement.
L'extrait de code ne fonctionne pas pour des raisons de sécurité. Uniquement pour la démonstration de code.
J'ai lu des questions similaires, mais je n'ai pas trouvé de réponse.
<script src="https://unpkg.com/jspdf@1.5.3/dist/jspdf.min.js"></script> <button id="button">Generate pdf table</button>
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);
}
5 Réponses :
Vous générez un PDF à partir de ses données brutes en utilisant Javascript. Pourquoi ne pas utiliser un lecteur comme Adobe pour le rendre? C'est ce qui se passe lorsque vous cliquez sur le lien de la console. Vous pouvez littéralement simplement ouvrir le lien et il s'ouvrira au format PDF. Je pense que vous compliquez peut-être trop cette tâche.
Merci pour la réponse. Ouvrez le pdf dans le navigateur pour ses besoins commerciaux. Vous savez probablement comment c'est (je peux télécharger le pdf. Mais le sien ne convient pas au client
La plupart des navigateurs l'ouvriront toujours dans le navigateur à l'aide du lecteur installé. Je suis à peu près sûr que vous avez toujours une sorte de lecteur de pdf installé et c'est ce qui l'ouvre lorsque vous cliquez sur le lien dans la console. Il se peut que Chrome ait un lecteur intégré. Essayez de copier / coller le lien dans la barre d'adresse. Vous pouvez toujours ouvrir le lien dans une iframe et il l'ouvrira dans le navigateur. Si vous utilisez la bibliothèque javascript, je ne sais pas si cela crée une page html à partir de PDF.
Essayez plutôt window.open () . Le code suivant a fonctionné pour moi. Vous devrez modifier la taille de la fenêtre / page.
pdf.setProperties({
title: "jsPDF sample"
});
Mise à jour:
Je ne savais pas que jsPDF était livré avec une méthode intégrée
pdf.output ('dataurlnewwindow'); code>, qui utilise iframe ,L'inconvénient de
pdf.output ('dataurlnewwindow')est qu'il ouvre un nouvel onglet / fenêtre avecdatauristringcomme nom de fichier pdf et le bouton de téléchargement ne le fait pas ' t travailler, tandis quewindow.open (pdf.output (' bloburl '))semble bien avec le bouton de téléchargement.D'accord, le fichier pdf peut être renommé comme ceci:
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>");
Mise à jour 2:
Pour éviter que la page ne soit coupée lors d'un zoom sur une page, vous pouvez définir l'échelle html2canvas en conséquence. p>
Le PDF ouvert par pdf.output ('dataurlnewwindow') disparaît également en appuyant sur Entrée sur la barre d'adresse car il n'y a pas d'URL dans la barre d'adresse. window.open (pdf.output ('bloburl') ) n'a pas ce problème
J'ai remarqué que lors de l'utilisation de pdf.output ('dataurlnewwindow') sur Chrome, la nouvelle page continue de se charger. Ce qui vous empêche d'utiliser la fonction de téléchargement. Mais sur un autre navigateur comme Firefox, la même méthode ne pose pas ce problème. Là, cela fonctionne comme prévu.
J'exécute le code de la question sur la machine locale et je prends cette erreur:
Non autorisé à naviguer du cadre supérieur vers l'URL des données: data: application / pdf; filename = generated.pdf; base64, ...
JsPDF - Non autorisé à naviguer dans le cadre supérieur vers URL de données
J'ai essayé la suggestion @WeihuiGuo. Malheureusement pour moi.
J'ai trouvé que Chrome ouvre automatiquement le pdf.
https://support.google.com/chrome/answer/6213030 ? hl = fr
https://groups.google.com/ a / chromium.org / forum / #! topic / chromium-bugs / z5hA0H6LFws
Et pas seulement pour le nouvel onglet. Non ouvert également sur la page actuelle.
https://sphilee.github.io/jsPDF-CustomFonts-support/ < / p>
Dans d'autres navigateurs, cette page s'affiche correctement.
Une si triste nouvelle.
J'ai du mal à comprendre quel est exactement votre objectif actuellement. Si vous voulez juste ouvrir votre pdf créé jspdf dans un nouvel onglet / fenêtre, cela peut être aussi simple que doc.output ('dataurlnewwindow'); . Voir ma réponse mise à jour. L'erreur que vous avez obtenue, Pas autorisé à naviguer du cadre supérieur vers l'URL de données: data: application / pdf; filename = generated.pdf; base64, ... ressemble plus à ce que vous essayez d'ouvrir le pdf à le même onglet / fenêtre, pas un nouveau.
@ WeihuiGuo, merci pour votre patience et votre aide. Je n'ai pas encore trouvé la raison, mais votre code fonctionne maintenant pdf.output ('dataurlnewwindow')
Aucun problème. Mais la réponse n'est pas parfaite. J'ai trouvé que si l'utilisateur zoomait sur la page dans une certaine mesure, la sortie pouvait être coupée. J'essaie toujours de trouver un moyen de résoudre ce problème.
C'est en fait très simple, ne compliquez pas les choses ..
let newWindow = window.open('/');
fetch(doc.output('datauristring')).then(res => res.blob()).then(blob => {
newWindow.location = URL.createObjectURL(blob);
})
ou une version plus verbeuse et moins efficace :
window.open(URL.createObjectURL(doc.output("blob")))
(Vous devez ouvrir la nouvelle fenêtre immédiatement après le clic ou Chrome bloquera le popup. Cette solution n'est pas aussi bonne car il y a une conversion inutile de datauri en blob)
p >
Oui, vous pouvez aussi simplement utiliser window.open (pdf.output ('bloburl'));
Ce code fonctionne pour moi
var doc = new jsPDF();
doc.setProperties({
title: "new Report"
});
doc.output('dataurlnewwindow');
Non autorisé à naviguer dans le cadre supérieur à l'URL de données