Mixing
pdf file not opening in browser
1
I am receiving a pdf file as api call response from a node.js backend.The file opens in browser window in an encoded format.I have tried to download but the downloaded file has error opening it (error: failed to load pdf document).I am told the response body is base64 encoded.
Is their any way the pdf can be open /downloaded correctly.I am using react.js and is new to it.
code snippet :
import FileDownload from 'js-file-download';
export function getTaxInvoice({token}){
const authString = `Bearer ${token}`;
return (dispatch) => {
return axios.get(`${MAIN_URL}/rental_invoice`,{
headers: {Authorization: authString, 'Accept': 'application/json','Content-Type': 'application/pdf'},
responseType: "arraybuffer",//I have tried with blob as well
encoding: null
})
.then((response)=>{
FileDownload(response, 'some.pdf');
const taxInvoiceUrl = window.URL.createObjectURL(new Blob([response.data]));
window.open(taxInvoiceUrl, "_blank");
console.log( response);
// dispatch(taxInvoiceLoadSuccess(taxInvoiceUrl));
// dispatch(onViewChanged("rental_invoice"));
})
.catch((error)=>{
dispatch(taxInvoiceLoadFailed());
})
}
}
response from api call:image snippet
javascript node.js reactjs
asked Jan 2 at 23:29
RemRem
64
|
show 4 more comments
1
I am receiving a pdf file as api call response from a node.js backend.The file opens in browser window in an encoded format.I have tried to download but the downloaded file has error opening it (error: failed to load pdf document).I am told the response body is base64 encoded.
Is their any way the pdf can be open /downloaded correctly.I am using react.js and is new to it.
code snippet :
import FileDownload from 'js-file-download';
export function getTaxInvoice({token}){
const authString = `Bearer ${token}`;
return (dispatch) => {
return axios.get(`${MAIN_URL}/rental_invoice`,{
headers: {Authorization: authString, 'Accept': 'application/json','Content-Type': 'application/pdf'},
responseType: "arraybuffer",//I have tried with blob as well
encoding: null
})
.then((response)=>{
FileDownload(response, 'some.pdf');
const taxInvoiceUrl = window.URL.createObjectURL(new Blob([response.data]));
window.open(taxInvoiceUrl, "_blank");
console.log( response);
// dispatch(taxInvoiceLoadSuccess(taxInvoiceUrl));
// dispatch(onViewChanged("rental_invoice"));
})
.catch((error)=>{
dispatch(taxInvoiceLoadFailed());
})
}
}
response from api call:image snippet
javascript node.js reactjs
asked Jan 2 at 23:29
RemRem
64
Just a guess but trynew Blob(response.data)(without nestingresponse.datain an array).
– justin.m.chase
Jan 2 at 23:32
@justin.m.chase : Tried it .no t working
– Rem
Jan 2 at 23:37
so the array buffer is a base64 encoded content? Then decode it and set it in the blob.
– karthick
Jan 2 at 23:39
You may need to add{ type: 'application/pdf' }as a second argument to Blob then
– justin.m.chase
Jan 2 at 23:46
@karthick : atob () function is giving th eerror: message: "Failed to execute 'atob' on 'Window': The string to be decoded contains characters outside of the Latin1 range." ab2str() is returning data in some chinese language.
– Rem
Jan 3 at 0:23
|
show 4 more comments
1
1
1
I am receiving a pdf file as api call response from a node.js backend.The file opens in browser window in an encoded format.I have tried to download but the downloaded file has error opening it (error: failed to load pdf document).I am told the response body is base64 encoded.
Is their any way the pdf can be open /downloaded correctly.I am using react.js and is new to it.
code snippet :
import FileDownload from 'js-file-download';
export function getTaxInvoice({token}){
const authString = `Bearer ${token}`;
return (dispatch) => {
return axios.get(`${MAIN_URL}/rental_invoice`,{
headers: {Authorization: authString, 'Accept': 'application/json','Content-Type': 'application/pdf'},
responseType: "arraybuffer",//I have tried with blob as well
encoding: null
})
.then((response)=>{
FileDownload(response, 'some.pdf');
const taxInvoiceUrl = window.URL.createObjectURL(new Blob([response.data]));
window.open(taxInvoiceUrl, "_blank");
console.log( response);
// dispatch(taxInvoiceLoadSuccess(taxInvoiceUrl));
// dispatch(onViewChanged("rental_invoice"));
})
.catch((error)=>{
dispatch(taxInvoiceLoadFailed());
})
}
}
response from api call:image snippet
javascript node.js reactjs
asked Jan 2 at 23:29
RemRem
64
I am receiving a pdf file as api call response from a node.js backend.The file opens in browser window in an encoded format.I have tried to download but the downloaded file has error opening it (error: failed to load pdf document).I am told the response body is base64 encoded.
Is their any way the pdf can be open /downloaded correctly.I am using react.js and is new to it.
code snippet :
import FileDownload from 'js-file-download';
export function getTaxInvoice({token}){
const authString = `Bearer ${token}`;
return (dispatch) => {
return axios.get(`${MAIN_URL}/rental_invoice`,{
headers: {Authorization: authString, 'Accept': 'application/json','Content-Type': 'application/pdf'},
responseType: "arraybuffer",//I have tried with blob as well
encoding: null
})
.then((response)=>{
FileDownload(response, 'some.pdf');
const taxInvoiceUrl = window.URL.createObjectURL(new Blob([response.data]));
window.open(taxInvoiceUrl, "_blank");
console.log( response);
// dispatch(taxInvoiceLoadSuccess(taxInvoiceUrl));
// dispatch(onViewChanged("rental_invoice"));
})
.catch((error)=>{
dispatch(taxInvoiceLoadFailed());
})
}
}
response from api call:image snippet
javascript node.js reactjs
javascript node.js reactjs
asked Jan 2 at 23:29
RemRem
64
asked Jan 2 at 23:29
RemRem
64
edited Jan 2 at 23:33
Rem
asked Jan 2 at 23:29
RemRem
64
asked Jan 2 at 23:29
RemRem
64
asked Jan 2 at 23:29
RemRem
64
64
Just a guess but trynew Blob(response.data)(without nestingresponse.datain an array).
– justin.m.chase
Jan 2 at 23:32
@justin.m.chase : Tried it .no t working
– Rem
Jan 2 at 23:37
so the array buffer is a base64 encoded content? Then decode it and set it in the blob.
– karthick
Jan 2 at 23:39
You may need to add{ type: 'application/pdf' }as a second argument to Blob then
– justin.m.chase
Jan 2 at 23:46
@karthick : atob () function is giving th eerror: message: "Failed to execute 'atob' on 'Window': The string to be decoded contains characters outside of the Latin1 range." ab2str() is returning data in some chinese language.
– Rem
Jan 3 at 0:23
|
show 4 more comments
Just a guess but trynew Blob(response.data)(without nestingresponse.datain an array).
– justin.m.chase
Jan 2 at 23:32
@justin.m.chase : Tried it .no t working
– Rem
Jan 2 at 23:37
so the array buffer is a base64 encoded content? Then decode it and set it in the blob.
– karthick
Jan 2 at 23:39
You may need to add{ type: 'application/pdf' }as a second argument to Blob then
– justin.m.chase
Jan 2 at 23:46
@karthick : atob () function is giving th eerror: message: "Failed to execute 'atob' on 'Window': The string to be decoded contains characters outside of the Latin1 range." ab2str() is returning data in some chinese language.
– Rem
Jan 3 at 0:23
Just a guess but try
new Blob(response.data) (without nesting response.data in an array).– justin.m.chase
Jan 2 at 23:32
Just a guess but try
new Blob(response.data) (without nesting response.data in an array).– justin.m.chase
Jan 2 at 23:32
@justin.m.chase : Tried it .no t working
– Rem
Jan 2 at 23:37
@justin.m.chase : Tried it .no t working
– Rem
Jan 2 at 23:37
so the array buffer is a base64 encoded content? Then decode it and set it in the blob.
– karthick
Jan 2 at 23:39
so the array buffer is a base64 encoded content? Then decode it and set it in the blob.
– karthick
Jan 2 at 23:39
You may need to add
{ type: 'application/pdf' } as a second argument to Blob then– justin.m.chase
Jan 2 at 23:46
You may need to add
{ type: 'application/pdf' } as a second argument to Blob then– justin.m.chase
Jan 2 at 23:46
@karthick : atob () function is giving th eerror: message: "Failed to execute 'atob' on 'Window': The string to be decoded contains characters outside of the Latin1 range." ab2str() is returning data in some chinese language.
– Rem
Jan 3 at 0:23
@karthick : atob () function is giving th eerror: message: "Failed to execute 'atob' on 'Window': The string to be decoded contains characters outside of the Latin1 range." ab2str() is returning data in some chinese language.
– Rem
Jan 3 at 0:23
|
show 4 more comments
3 Answers
3
active
oldest
votes
0
Try changingFileDownload(response, 'some.pdf');
toFileDownload(response.data, 'some.pdf');
answered Jan 2 at 23:37
Laurens DeprostLaurens Deprost
978114
same result. the pdf is opening in encoded format and the downloaded pdf gives the same error
– Rem
Jan 2 at 23:40
add a comment |
0
Here is an example of some code I have used in the past to do this:
function downloadURI (url, name) {
var link = document.createElement('a')
link.download = name
link.href = url
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
}
export function download (url, type = 'application/pdf', name = 'example') {
get(url, (err, result) => {
if (err) return handleError(err)
const blob = new Blob([result.body], { type })
const downloadUrl = URL.createObjectURL(blob)
downloadURI(downloadUrl, name)
})
}
It will download the file and create an object url and automatically trigger opening the file by programatically clicking a link.
answered Jan 2 at 23:47
justin.m.chasejustin.m.chase
8,12953371
add a comment |
0
Finally solved the issue.(My senior dev helped me).Final code is below:
install base64js and filedownload on npm .
export function getTaxInvoice({token}){
const authString = `Bearer ${token}`;
return (dispatch) => {
return axios.get(`${MAIN_URL}/rental_invoice`,{
headers: {Authorization: authString, 'Accept': 'application/pdf','Content-Type': 'application/pdf'}
})
.then((response)=>{
FileDownload(base64js.toByteArray(response.data), 'some.pdf');
const taxInvoiceUrl = window.URL.createObjectURL(new Blob([base64js.toByteArray(response.data)], { type: "application/pdf" }) );
window.open(taxInvoiceUrl, "_blank");
dispatch(taxInvoiceLoadSuccess(response.data));
dispatch(onViewChanged("rental_invoice"));
})
.catch((error)=>{
console.log(error);
dispatch(taxInvoiceLoadFailed());
})
}
}
answered Jan 3 at 2:34
RemRem
64
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54014537%2fpdf-file-not-opening-in-browser%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
Try changingFileDownload(response, 'some.pdf');
toFileDownload(response.data, 'some.pdf');
answered Jan 2 at 23:37
Laurens DeprostLaurens Deprost
978114
same result. the pdf is opening in encoded format and the downloaded pdf gives the same error
– Rem
Jan 2 at 23:40
add a comment |
0
Try changingFileDownload(response, 'some.pdf');
toFileDownload(response.data, 'some.pdf');
answered Jan 2 at 23:37
Laurens DeprostLaurens Deprost
978114
same result. the pdf is opening in encoded format and the downloaded pdf gives the same error
– Rem
Jan 2 at 23:40
add a comment |
0
0
0
Try changingFileDownload(response, 'some.pdf');
toFileDownload(response.data, 'some.pdf');
answered Jan 2 at 23:37
Laurens DeprostLaurens Deprost
978114
Try changingFileDownload(response, 'some.pdf');
toFileDownload(response.data, 'some.pdf');
answered Jan 2 at 23:37
Laurens DeprostLaurens Deprost
978114
answered Jan 2 at 23:37
Laurens DeprostLaurens Deprost
978114
answered Jan 2 at 23:37
Laurens DeprostLaurens Deprost
978114
answered Jan 2 at 23:37
Laurens DeprostLaurens Deprost
978114
978114
same result. the pdf is opening in encoded format and the downloaded pdf gives the same error
– Rem
Jan 2 at 23:40
add a comment |
same result. the pdf is opening in encoded format and the downloaded pdf gives the same error
– Rem
Jan 2 at 23:40
same result. the pdf is opening in encoded format and the downloaded pdf gives the same error
– Rem
Jan 2 at 23:40
same result. the pdf is opening in encoded format and the downloaded pdf gives the same error
– Rem
Jan 2 at 23:40
add a comment |
0
Here is an example of some code I have used in the past to do this:
function downloadURI (url, name) {
var link = document.createElement('a')
link.download = name
link.href = url
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
}
export function download (url, type = 'application/pdf', name = 'example') {
get(url, (err, result) => {
if (err) return handleError(err)
const blob = new Blob([result.body], { type })
const downloadUrl = URL.createObjectURL(blob)
downloadURI(downloadUrl, name)
})
}
It will download the file and create an object url and automatically trigger opening the file by programatically clicking a link.
answered Jan 2 at 23:47
justin.m.chasejustin.m.chase
8,12953371
add a comment |
0
Here is an example of some code I have used in the past to do this:
function downloadURI (url, name) {
var link = document.createElement('a')
link.download = name
link.href = url
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
}
export function download (url, type = 'application/pdf', name = 'example') {
get(url, (err, result) => {
if (err) return handleError(err)
const blob = new Blob([result.body], { type })
const downloadUrl = URL.createObjectURL(blob)
downloadURI(downloadUrl, name)
})
}
It will download the file and create an object url and automatically trigger opening the file by programatically clicking a link.
answered Jan 2 at 23:47
justin.m.chasejustin.m.chase
8,12953371
add a comment |
0
0
0
Here is an example of some code I have used in the past to do this:
function downloadURI (url, name) {
var link = document.createElement('a')
link.download = name
link.href = url
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
}
export function download (url, type = 'application/pdf', name = 'example') {
get(url, (err, result) => {
if (err) return handleError(err)
const blob = new Blob([result.body], { type })
const downloadUrl = URL.createObjectURL(blob)
downloadURI(downloadUrl, name)
})
}
It will download the file and create an object url and automatically trigger opening the file by programatically clicking a link.
answered Jan 2 at 23:47
justin.m.chasejustin.m.chase
8,12953371
Here is an example of some code I have used in the past to do this:
function downloadURI (url, name) {
var link = document.createElement('a')
link.download = name
link.href = url
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
}
export function download (url, type = 'application/pdf', name = 'example') {
get(url, (err, result) => {
if (err) return handleError(err)
const blob = new Blob([result.body], { type })
const downloadUrl = URL.createObjectURL(blob)
downloadURI(downloadUrl, name)
})
}
It will download the file and create an object url and automatically trigger opening the file by programatically clicking a link.
answered Jan 2 at 23:47
justin.m.chasejustin.m.chase
8,12953371
answered Jan 2 at 23:47
justin.m.chasejustin.m.chase
8,12953371
answered Jan 2 at 23:47
justin.m.chasejustin.m.chase
8,12953371
answered Jan 2 at 23:47
justin.m.chasejustin.m.chase
8,12953371
8,12953371
add a comment |
add a comment |
0
Finally solved the issue.(My senior dev helped me).Final code is below:
install base64js and filedownload on npm .
export function getTaxInvoice({token}){
const authString = `Bearer ${token}`;
return (dispatch) => {
return axios.get(`${MAIN_URL}/rental_invoice`,{
headers: {Authorization: authString, 'Accept': 'application/pdf','Content-Type': 'application/pdf'}
})
.then((response)=>{
FileDownload(base64js.toByteArray(response.data), 'some.pdf');
const taxInvoiceUrl = window.URL.createObjectURL(new Blob([base64js.toByteArray(response.data)], { type: "application/pdf" }) );
window.open(taxInvoiceUrl, "_blank");
dispatch(taxInvoiceLoadSuccess(response.data));
dispatch(onViewChanged("rental_invoice"));
})
.catch((error)=>{
console.log(error);
dispatch(taxInvoiceLoadFailed());
})
}
}
answered Jan 3 at 2:34
RemRem
64
add a comment |
0
Finally solved the issue.(My senior dev helped me).Final code is below:
install base64js and filedownload on npm .
export function getTaxInvoice({token}){
const authString = `Bearer ${token}`;
return (dispatch) => {
return axios.get(`${MAIN_URL}/rental_invoice`,{
headers: {Authorization: authString, 'Accept': 'application/pdf','Content-Type': 'application/pdf'}
})
.then((response)=>{
FileDownload(base64js.toByteArray(response.data), 'some.pdf');
const taxInvoiceUrl = window.URL.createObjectURL(new Blob([base64js.toByteArray(response.data)], { type: "application/pdf" }) );
window.open(taxInvoiceUrl, "_blank");
dispatch(taxInvoiceLoadSuccess(response.data));
dispatch(onViewChanged("rental_invoice"));
})
.catch((error)=>{
console.log(error);
dispatch(taxInvoiceLoadFailed());
})
}
}
answered Jan 3 at 2:34
RemRem
64
add a comment |
0
0
0
Finally solved the issue.(My senior dev helped me).Final code is below:
install base64js and filedownload on npm .
export function getTaxInvoice({token}){
const authString = `Bearer ${token}`;
return (dispatch) => {
return axios.get(`${MAIN_URL}/rental_invoice`,{
headers: {Authorization: authString, 'Accept': 'application/pdf','Content-Type': 'application/pdf'}
})
.then((response)=>{
FileDownload(base64js.toByteArray(response.data), 'some.pdf');
const taxInvoiceUrl = window.URL.createObjectURL(new Blob([base64js.toByteArray(response.data)], { type: "application/pdf" }) );
window.open(taxInvoiceUrl, "_blank");
dispatch(taxInvoiceLoadSuccess(response.data));
dispatch(onViewChanged("rental_invoice"));
})
.catch((error)=>{
console.log(error);
dispatch(taxInvoiceLoadFailed());
})
}
}
answered Jan 3 at 2:34
RemRem
64
Finally solved the issue.(My senior dev helped me).Final code is below:
install base64js and filedownload on npm .
export function getTaxInvoice({token}){
const authString = `Bearer ${token}`;
return (dispatch) => {
return axios.get(`${MAIN_URL}/rental_invoice`,{
headers: {Authorization: authString, 'Accept': 'application/pdf','Content-Type': 'application/pdf'}
})
.then((response)=>{
FileDownload(base64js.toByteArray(response.data), 'some.pdf');
const taxInvoiceUrl = window.URL.createObjectURL(new Blob([base64js.toByteArray(response.data)], { type: "application/pdf" }) );
window.open(taxInvoiceUrl, "_blank");
dispatch(taxInvoiceLoadSuccess(response.data));
dispatch(onViewChanged("rental_invoice"));
})
.catch((error)=>{
console.log(error);
dispatch(taxInvoiceLoadFailed());
})
}
}
answered Jan 3 at 2:34
RemRem
64
edited Jan 4 at 0:36
answered Jan 3 at 2:34
RemRem
64
answered Jan 3 at 2:34
RemRem
64
answered Jan 3 at 2:34
RemRem
64
64
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54014537%2fpdf-file-not-opening-in-browser%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Just a guess but try
new Blob(response.data)(without nestingresponse.datain an array).– justin.m.chase
Jan 2 at 23:32
@justin.m.chase : Tried it .no t working
– Rem
Jan 2 at 23:37
so the array buffer is a base64 encoded content? Then decode it and set it in the blob.
– karthick
Jan 2 at 23:39
You may need to add
{ type: 'application/pdf' }as a second argument to Blob then– justin.m.chase
Jan 2 at 23:46
@karthick : atob () function is giving th eerror: message: "Failed to execute 'atob' on 'Window': The string to be decoded contains characters outside of the Latin1 range." ab2str() is returning data in some chinese language.
– Rem
Jan 3 at 0:23