Скачивается пустой PDF файл JS

263
09 декабря 2017, 09:41

Добрый день!

Суть проблемы описана в заголовке.

Сейчас у меня из React компонента по клику действие передается в action, где у меня идет запрос к backend'у при помощи async-await. Затем, если всё ок, то я в dispatch передаю response.data (мой pdf), затем при помощи хелпера, создаю невидимую ссылку, кликаю на нее и файл скачивается, но он пустой. Проверялось на разных файлах, везде качивается pdf файл с пустыми страницами (замечу, что страниц столько же, сколько и в документе реальном). Подозрение, что что-то не так с кодировками, но найти ошибку не могу. Реализовываю такое впервые, поэтому в тупике и не знаю как найти выход из данной проблемы.

Вот мой код:

Мой Action

export const request = createAction(DOWNLOAD_PDF);
export const success = createAction(DOWNLOAD_PDF_SUCCESS, ({ response, id }) => {
    fileDownload(response, `return-${id}.pdf`); // Мой хелпер
    return { payload: { data: response, id } };
});
export const failure = createAction(DOWNLOAD_PDF_FAIL);
export default ({ id }) => {
    return async dispatch => {
        try {
            dispatch(request());
            const response = await returns.getPdf({ id });
            dispatch(success({ response: response.data, id }));
        } catch (error) {
            dispatch(
                failure({
                    payload: {
                        message: 'Неудалось скачать PDF',
                        stack: error.stack,
                    },
                }),
            );
            errorLogger(error, DOWNLOAD_PDF);
        }
    };
};

Мой хелпер:

export default function (data, fileName, format = 'utf-8') {
    if (typeof window.navigator.msSaveBlob !== 'undefined') {
        const byteNumbers = new Array(data.length); // save file in IE or edge
        for (let i = 0; i < data.length; i += 1) {
            byteNumbers[i] = data.charCodeAt(i);
        }
        const byteArray = new Uint8Array(byteNumbers);
        const blob = new Blob([byteArray], { type: format });
        navigator.msSaveBlob(blob, fileName);
        return;
    }
    let url = `data:application/pdf;charset=${format}`;
    if (format === 'windows-1251') {
        url += `;base64,${btoa(data)}`;
    } else {
        url += `,${encodeURIComponent(data)}`;
    }
    const tempLink = document.createElement('a');
    tempLink.href = url;
    tempLink.setAttribute('download', fileName);
    tempLink.setAttribute('target', '_blank');
    document.body.appendChild(tempLink);
    tempLink.click();
    document.body.removeChild(tempLink);
}

Любая помощь будет очень ценной!

READ ALSO
Событие нажатия на колесо мыши Jquery

Событие нажатия на колесо мыши Jquery

У меня есть простая ссылка типа

247
Debug JS\TS in Azure Service Fabric application

Debug JS\TS in Azure Service Fabric application

Does anyone know how to configure JS\TS debugging for Visual Studio for Azure Service Fabric projects?

223