0

I'm trying to use Angular5 with DocRaptor and ran into some issues. There isn't any documentation on their site regarding how to integrate with Angular, but there is a getting started guide for 'other'. I have also investigated this issue here (/using-docraptor-web-service-with-angularjs) without much luck.

My Module

In my module I have added the following:

import { HttpClientModule } from '@angular/common/http';

My Component

In my component I have imported:

import { HttpClient } from '@angular/common/http';

I have a button that takes a string and generates a PDF. I'm not too knowledgable with post requests. The following is what i've tried:

return this.http.post('https://myAPIKEY@docraptor.com/docs', {
  "test": true,
  "name": "testDocument.pdf",
  "document_content": '<div>PDF generation test</div>',
  "type": "pdf",
}).subscribe(
  res => {
    console.log(res);
  },
  err => {
    console.log("Error occured");
  }
);

This causes two errors:

POST https://docraptor.com/docs 401 (Unauthorized)

and

Failed to load https://docraptor.com/docs: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://mydomain' is therefore not allowed access. The response had HTTP status code 401.

Any assistance on how to correctly post the content to DocRaptor and receive the download URL in return without CORS issues would be massively appreciated.

UPDATE

I managed to get the following code to successfully post to DocRaptor. I just need to make a request with the returned status ID:

return this.http.post('https://docraptor.com/docs?user_credentials=mycreds', forDocRaptor).subscribe(res => {
  console.log(res);
},
  err => {
    console.log("Error occured = ", err);
  }
)
Haven
  • 87
  • 1
  • 9
  • https://stackoverflow.com/questions/47345282/how-to-add-cors-request-in-header-in-angular-5 – nicowernli Mar 21 '18 at 08:35
  • According to their site: "Also, DocRaptor fully supports the CORS specification, allowing cross-site HTTP requests" - I believe it's something wrong with my code. I'm just not sure what that is yet. Once the code is right, i don't think cors should be an issue. – Haven Mar 21 '18 at 08:40
  • DocRaptor developer here: You only need to make a status request if you're using asynchronous documents, which are only necessary if you document takes longer than 60 seconds to generate. I would assume most Angular documents don't take that long and you could probably just use synchronous document generation. That might make things a little simpler. – jamespaden Mar 21 '18 at 13:24

1 Answers1

0

According to https://docraptor.com/documentation/node, you should post your credentials in the body

return this.http.post('https://docraptor.com/docs', 
{
user_credentials: "YOUR_API_KEY_HERE",
doc: {
  "test": true,
  "name": "testDocument.pdf",
  "document_content": '<div>PDF generation test</div>',
  "type": "pdf",
}
}
).subscribe(
  res => {
    console.log(res);
  },
  err => {
    console.log("Error occured");
  }
);
David
  • 33,444
  • 11
  • 80
  • 118
  • Thanks. Yup, this produced the same results as the update in my post. The only issue now is that I need to make a request against the returned status id http://docraptor.com/status/{status_id}. – Haven Mar 21 '18 at 09:07