CODEWITHSUNDEEP
typescriptreact-nativereduxreact-hooks
Rabia Shahzad
Rabia Shahzad

Reputation: 1

I want to get the pdf file the API in react native. I am trying this

This is where i am getting my API's.

I have used response type blob to get pdf file from the api but i m unable to do so..

const CourseApi = createApi({ baseQuery, reducerPath: 'CourseApi', tagTypes: [CACHE_TAGS.COURSE], endpoints: builder => ({

transcript: builder.query({
  query: ({ id }: { id: number }) => ({
    url: `${END_POINTS.STUDENT}/${END_POINTS.TRANSCRIPT}?id=${id}`,
    method: API_METHODS.GET,
    responseType: 'blob',
  }),
  transformResponse: (response: Response) => response.blob(),
}),

}) });

export default CourseApi; export const { util: CourseApiUtil, useTranscriptQuery, } = CourseApi;

This is where i am trying to get the pdf file from api

const TranscriptDetail = (props: TranscriptProps) => { const { data, error } = useTranscriptQuery({ id: props.data.semster_id }); 
console.debug(data) 
return ( 
<View> 
<View style={styles.container}> 
<View style={styles.innerConatiner}> 
<Text style={styles.semesterName}>{props.data.name}</Text> 
</View> <TouchableOpacity onPress={() => {

    }}>
      <View style={styles.innerConatiner2}>
        <Text style={styles.download}>Download</Text>
        <Download />
      </View>
    </TouchableOpacity>
  </View>
  <View style={{ flexDirection: 'row', alignItems: 'center', paddingLeft: 0, paddingRight: 0 }}>
    <View style={{ flex: 1, height: 1, backgroundColor: '#E2E8F0' }} />
    <View style={{ flex: 1, height: 1, backgroundColor: '#E2E8F0' }} />
  </View>
</View>

); };

export default TranscriptDetail;'

This the error:

%%EOF", "error": "SyntaxError: JSON Parse error: Unexpected token: %", "originalStatus": 200, "status": "PARSING_ERROR"}

OutPut from api

{"_bodyBlob": {"_data": {"__collector": [Object], "blobId": "685e0275-e681-4d2a-a9ba-86d79fea1f66", "offset": 0, "size": 45784}}, "_bodyInit": {"_data": {"__colle ctor": [Object], "blobId": "685e0275-e681-4d2a-a9ba-86d79fea1f66", "offset": 0, "size": 45784}}, "bodyUsed": true, "headers": {"map": {"cache-control": "public, must-reva lidate, max-age=0", "connection": "Keep-Alive", "content-description": "File Transfer", "content-disposition": "attachment; filename="TranscriptOBE.pdf"", "content-tran sfer-encoding": "binary", "content-type": "application/pdf", "date": "Mon, 27 Feb 2023 07:01:22 GMT", "expires": "Sat, 26 Jul 1997 05:00:00 GMT", "keep-alive": "timeout=5 , max=99", "last-modified": "Mon, 27 Feb 2023 07:01:22 GMT", "pragma": "public", "server": "Apache/2.4.29 (Ubuntu)", "transfer-encoding": "chunked", "x-generator": "mPDF 8.1.2"}}, "ok": true, "status": 200, "statusText": "", "type": "default", "url": "http://ssapi.qualityobe.com/student/getobetranscript?id=7"}

Upvotes: 0

Views: 283

Answers (1)

Maxim Mazurok
Maxim Mazurok

Reputation: 4162

I think that your builder.query function is attempting to parse the response as JSON. Perhaps responseType: 'blob' is not recognized by it correctly. Maybe try using application/pdf instead of blob.

Upvotes: 0

Related Questions