PDF ללא תצוגה בגישה דרך ajax
-
שלום וברכה
יצרתי קוד (במקרה זה php) שיוצר PDF ומזרים לדף, בגישה ישירה הכל נוסע חלק, ואכן הPDF מגיע כפי הצפי.
אמנם ניסיתי לבצע גישה דרך js מהדפדפן, זה אומר שאני פונה בajax ומקבל מידע בינארי שממנו אני יוצר blob
כאן מתחילה הבעיה, הקובץ שמוצג במקרה זה הוא דף לבן, ריק.מה יכול להיות?
הרי זה אותו תוכן בין בגישה ישירה ובין בגישה בajax?הקוד בclient
function downloadPdf() { setLoading('download'); axios.get(route('documents.download', doc.id), {}, { responseType: 'blob', }) .then((response) => { console.log(response.data) const blob = new Blob([response.data], { type: 'application/pdf' }); const url = window.URL.createObjectURL(blob); const link = document.createElement('a'); link.href = url; link.setAttribute('download', `receipt-${doc.id}.pdf`); document.body.appendChild(link); link.click(); setLoading(false); }) .catch((e) => { console.log(e) toast.error('Something went wrong, please try again.'); }) } -
אני לא יודע תשובה לשאלה, אבל אני כן יכול להציע לך איך לבדוק את זה.
דבר ראשון, תפריד את חלקי הפונקציה:function test() { const url = '/staticPdf.pdf'; const blobUrl = remoteFileToBlob(url, 'application/pdf'); downloadUrl(blobUrl); } function downloadPdf() { setLoading('download'); remoteFileToBlob(route('documents.download', doc.id), 'application/pdf') .then(url => downloadUrl(url)) .always(() => setLoading(false)); } function downloadUrl(url) { const link = document.createElement('a'); link.href = url; link.setAttribute('download', `receipt-${doc.id}.pdf`); document.body.appendChild(link); link.click(); } async function remoteFileToBlob(url, type) { try { const res = await axios.get(url, {}, { responseType: 'blob' }); console.log(response.data) const blob = new Blob([response.data], { type }); return window.URL.createObjectURL(blob); } catch (error) { console.log(e) toast.error('Something went wrong, please try again.'); } } שמתי מתודת טסט לראות שהקוד עובד בקובץ PDF שלא מגיע בהזרמה (סתם קובץ סטטי בשרת)
אם עובד, תבדוק את התשובה של הדפדפן בנטוורק, האם היא זהה בגודלה לגישה ישירה? -
לי יש פונקציה כזו שמבצעת הדפסה מקובץ PDF (דינאמי הנוצר בשרת nodejs)
Print() { const url = `api/print` const options = {} options.responseType = 'blob' useJwt.axiosIns.get(url, options).then(response => { console.log(response.data) const a = document.createElement('a') // eslint-disable-next-line no-shadow const url = URL.createObjectURL(new Blob([response.data])) a.href = url // eslint-disable-next-line prefer-destructuring const name = response.headers['content-disposition'].split(';')[1].split('=')[1].split('.') a.download = `${decodeURI(name[0])}.${decodeURI(name[1])}` document.body.append(a) a.click() a.remove() URL.revokeObjectURL(url) return true }).catch(error => { console.log(error) this.$swal({ title: 'שגיאה בהדפסה!', icon: 'error', customClass: { confirmButton: 'btn btn-primary', }, buttonsStyling: false, }) }) }
1/5