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.');
            })
    }

dovid

אני לא יודע תשובה לשאלה, אבל אני כן יכול להציע לך איך לבדוק את זה.
דבר ראשון, תפריד את חלקי הפונקציה:

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,
        })
      })
    }

חוקר

אני חושב שהסיבה היא שאתה מעביר לפונקציה get 3 פרמטרים ולא 2 ולכן השלישי לא מוגדר
מהתיעוד נראה שget מקבל 2.
תנסה למחוק את {} המיותר

ש.ב.ח.

@חוקר, צדקת.

אגב, זה שהפרט הזה (שבget הפרמטר השני הוא הconfig) היה ידוע לי כבר - לא עזר לי כשהעתקתי את ההצעה של copilot...

תחומים - פורום חרדי מקצועי

PDF ללא תצוגה בגישה דרך ajax