Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings
Discussion options

Hello everyone,

The following code involves using a native Form along with a hidden Iframe as the target to invoke an API and retrieve a large PDF file. My question is whether there is a method to achieve the same functionality using Axios instead.

export async function exportPdf(html: string) {
  const entry = '/api/export/'

  const submitForm = async () => {
    const iframeName = '__exportFrame'
    let iframe = document.getElementsByName(iframeName)[0] as HTMLIFrameElement
    if (!iframe) {
      iframe = document.createElement('iframe')
      iframe.name = iframeName
      iframe.style.display = 'none'

      document.body.appendChild(iframe)
    }

    const form = document.createElement('form')
    form.setAttribute('method', 'post')
    form.setAttribute('action', `/cb/api/2${entry}`)
    form.setAttribute('target', iframeName)

    const input = document.createElement('input')
    input.setAttribute('type', 'hidden')
    input.setAttribute('name', 'html')
    input.setAttribute('value', JSON.stringify(html))
    form.appendChild(inputElement)

    document.body.appendChild(form)
    form.submit()
    document.body.removeChild(form)
  }

  await submitForm()
}
You must be logged in to vote

Replies: 1 comment

Comment options

Hi, i had the same problem yesterday. It works like this.

export async function exportPdf(html: string) {
    const entry = "/api/export/";

    return axios
        .post(`/cb/api/2${entry}`, html, {
            responseType: "blob",
            headers: {
                "Content-Type": "text/html",
                "Content-Encoding": "UTF-8",
                Accept: "application/pdf, application/octet-stream",
            },
        })
        .then((res) => {
            const pdfBlob = new Blob([res.data], { type: "application/pdf" });
            const pdfUrl = URL.createObjectURL(pdfBlob);

            // open in new tab
            window.open(pdfUrl);

            // or download it
            const link = document.createElement("a");
            link.href = pdfUrl;
            link.setAttribute("download", "filename.pdf");
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);

            // clean up
            URL.revokeObjectURL(pdfUrl);
        });
}

i just used my code and adjusted it to you sample. It had not tested this snipped of code, especially what you'd expect to return from the exportPdf function but you get the idea.

You must be logged in to vote
0 replies
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Category
🙏
Q&A
Labels
None yet
2 participants
Morty Proxy This is a proxified and sanitized view of the page, visit original site.