{"id":2856,"date":"2022-08-14T07:39:51","date_gmt":"2022-08-14T02:39:51","guid":{"rendered":"https:\/\/www.edopedia.com\/blog\/?p=2856"},"modified":"2022-08-14T07:46:38","modified_gmt":"2022-08-14T02:46:38","slug":"download-pdf-file-from-url-using-jquery-ajax-method","status":"publish","type":"post","link":"https:\/\/www.edopedia.com\/blog\/download-pdf-file-from-url-using-jquery-ajax-method\/","title":{"rendered":"Download PDF File From URL Using jQuery AJAX Method"},"content":{"rendered":"\n<p>In this tutorial, you will learn how to download a PDF file from a URL using jQuery and AJAX. We will also use some HTML5 and core JavaScript code to build the application.<\/p>\n\n\n\n<p>The complete source code of the PDF downloader developed using jQuery and AJAX is given below.<\/p>\n\n\n\n<p>To get started, simply create a new HTML file <code>index.html<\/code> and copy\/paste the below-mentioned code into it.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">index.html<\/h2>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text\/html&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;HTML&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;html&quot;}\">&lt;button type=&quot;button&quot; id=&quot;download_pdf_file&quot;&gt;Download PDF File!&lt;\/button&gt;\n&lt;script src=&quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.1.0\/jquery.min.js&quot;&gt;&lt;\/script&gt;\n&lt;script&gt;\n$('#download_pdf_file').on('click', function () {\n    $.ajax({\n        url: 'https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/172905\/test.pdf',\n        method: 'GET',\n        xhrFields: {\n            responseType: 'blob'\n        },\n        success: function (data) {\n            var a = document.createElement('a');\n            var url = window.URL.createObjectURL(data);\n            a.href = url;\n            a.download = 'my_file.pdf';\n            document.body.append(a);\n            a.click();\n            a.remove();\n            window.URL.revokeObjectURL(url);\n        }\n    });\n});\n&lt;\/script&gt;<\/pre><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Code Explanation<\/h2>\n\n\n\n<ol class=\"wp-block-list\"><li>At first, we will create a button using HTML. The user will click this button to download the file.<\/li><li>Load the jQuery using CDN.<\/li><li>Attach an onClick event to the &#8220;Download PDF File!&#8221; button. This method will be executed whenever the button is pressed.<\/li><li>Now make an AJAX call to the desired PDF file using the built-in <code>ajax()<\/code> method of jQuery.<\/li><\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Run the Project<\/h2>\n\n\n\n<p>In order to see our code in action, go ahead and open the <code>index.html<\/code> file in your favorite web browser.<\/p>\n\n\n\n<p>The output will look something like this screenshot.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"595\" height=\"96\" src=\"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/08\/Screenshot-2022-08-14-071657.png\" alt=\"Download PDF File using jQuery AJAX\" class=\"wp-image-2857\" title=\"Download PDF File using jQuery AJAX\" srcset=\"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/08\/Screenshot-2022-08-14-071657.png 595w, https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/08\/Screenshot-2022-08-14-071657-300x48.png 300w\" sizes=\"auto, (max-width: 595px) 100vw, 595px\" \/><\/figure>\n\n\n\n<p>Here, you need to click the &#8220;Download PDF File!&#8221; button.<\/p>\n\n\n\n<p>When you click this button, the PDF file will automatically start downloading on your PC.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"882\" height=\"234\" src=\"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/08\/Screenshot-2022-08-14-072224.png\" alt=\"PDF File Downloaded using jQuery and AJAX\" class=\"wp-image-2858\" title=\"PDF File Downloaded using jQuery and AJAX\" srcset=\"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/08\/Screenshot-2022-08-14-072224.png 882w, https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/08\/Screenshot-2022-08-14-072224-300x80.png 300w, https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/08\/Screenshot-2022-08-14-072224-768x204.png 768w\" sizes=\"auto, (max-width: 882px) 100vw, 882px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>In this tutorial, you will learn how to download a PDF file from a URL using jQuery and AJAX. We will also use some HTML5 and core JavaScript code to build the application. The complete source code of the PDF downloader developed using jQuery and AJAX is given below. To get started, simply create a &#8230; <a title=\"Download PDF File From URL Using jQuery AJAX Method\" class=\"read-more\" href=\"https:\/\/www.edopedia.com\/blog\/download-pdf-file-from-url-using-jquery-ajax-method\/\" aria-label=\"Read more about Download PDF File From URL Using jQuery AJAX Method\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":2860,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[112],"tags":[],"class_list":["post-2856","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Download PDF File From URL Using jQuery AJAX Method<\/title>\n<meta name=\"description\" content=\"In this tutorial, you will learn how to download a PDF file from a URL using jQuery and AJAX. We will also use some HTML5 and core JavaScript code to\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.edopedia.com\/blog\/download-pdf-file-from-url-using-jquery-ajax-method\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Download PDF File From URL Using jQuery AJAX Method\" \/>\n<meta property=\"og:description\" content=\"In this tutorial, you will learn how to download a PDF file from a URL using jQuery and AJAX. We will also use some HTML5 and core JavaScript code to\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.edopedia.com\/blog\/download-pdf-file-from-url-using-jquery-ajax-method\/\" \/>\n<meta property=\"og:site_name\" content=\"Edopedia\" \/>\n<meta property=\"article:author\" content=\"trulyfurqan\" \/>\n<meta property=\"article:published_time\" content=\"2022-08-14T02:39:51+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-08-14T02:46:38+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/08\/download_pdf_using_jquery_ajax.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"880\" \/>\n\t<meta property=\"og:image:height\" content=\"495\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Furqan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Furqan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Download PDF File From URL Using jQuery AJAX Method","description":"In this tutorial, you will learn how to download a PDF file from a URL using jQuery and AJAX. We will also use some HTML5 and core JavaScript code to","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.edopedia.com\/blog\/download-pdf-file-from-url-using-jquery-ajax-method\/","og_locale":"en_US","og_type":"article","og_title":"Download PDF File From URL Using jQuery AJAX Method","og_description":"In this tutorial, you will learn how to download a PDF file from a URL using jQuery and AJAX. We will also use some HTML5 and core JavaScript code to","og_url":"https:\/\/www.edopedia.com\/blog\/download-pdf-file-from-url-using-jquery-ajax-method\/","og_site_name":"Edopedia","article_author":"trulyfurqan","article_published_time":"2022-08-14T02:39:51+00:00","article_modified_time":"2022-08-14T02:46:38+00:00","og_image":[{"width":880,"height":495,"url":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/08\/download_pdf_using_jquery_ajax.jpg","type":"image\/jpeg"}],"author":"Furqan","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Furqan","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.edopedia.com\/blog\/download-pdf-file-from-url-using-jquery-ajax-method\/#article","isPartOf":{"@id":"https:\/\/www.edopedia.com\/blog\/download-pdf-file-from-url-using-jquery-ajax-method\/"},"author":{"name":"Furqan","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/person\/3951cb19e3aa56df09e408c98aa02339"},"headline":"Download PDF File From URL Using jQuery AJAX Method","datePublished":"2022-08-14T02:39:51+00:00","dateModified":"2022-08-14T02:46:38+00:00","mainEntityOfPage":{"@id":"https:\/\/www.edopedia.com\/blog\/download-pdf-file-from-url-using-jquery-ajax-method\/"},"wordCount":194,"commentCount":0,"publisher":{"@id":"https:\/\/www.edopedia.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/download-pdf-file-from-url-using-jquery-ajax-method\/#primaryimage"},"thumbnailUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/08\/download_pdf_using_jquery_ajax.jpg","articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.edopedia.com\/blog\/download-pdf-file-from-url-using-jquery-ajax-method\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.edopedia.com\/blog\/download-pdf-file-from-url-using-jquery-ajax-method\/","url":"https:\/\/www.edopedia.com\/blog\/download-pdf-file-from-url-using-jquery-ajax-method\/","name":"Download PDF File From URL Using jQuery AJAX Method","isPartOf":{"@id":"https:\/\/www.edopedia.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.edopedia.com\/blog\/download-pdf-file-from-url-using-jquery-ajax-method\/#primaryimage"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/download-pdf-file-from-url-using-jquery-ajax-method\/#primaryimage"},"thumbnailUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/08\/download_pdf_using_jquery_ajax.jpg","datePublished":"2022-08-14T02:39:51+00:00","dateModified":"2022-08-14T02:46:38+00:00","description":"In this tutorial, you will learn how to download a PDF file from a URL using jQuery and AJAX. We will also use some HTML5 and core JavaScript code to","breadcrumb":{"@id":"https:\/\/www.edopedia.com\/blog\/download-pdf-file-from-url-using-jquery-ajax-method\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.edopedia.com\/blog\/download-pdf-file-from-url-using-jquery-ajax-method\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.edopedia.com\/blog\/download-pdf-file-from-url-using-jquery-ajax-method\/#primaryimage","url":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/08\/download_pdf_using_jquery_ajax.jpg","contentUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/08\/download_pdf_using_jquery_ajax.jpg","width":880,"height":495,"caption":"Download PDF File From URL Using jQuery AJAX Method"},{"@type":"BreadcrumbList","@id":"https:\/\/www.edopedia.com\/blog\/download-pdf-file-from-url-using-jquery-ajax-method\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.edopedia.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Download PDF File From URL Using jQuery AJAX Method"}]},{"@type":"WebSite","@id":"https:\/\/www.edopedia.com\/blog\/#website","url":"https:\/\/www.edopedia.com\/blog\/","name":"Edopedia","description":"Coding\/Programming Blog","publisher":{"@id":"https:\/\/www.edopedia.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.edopedia.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.edopedia.com\/blog\/#organization","name":"Edopedia","url":"https:\/\/www.edopedia.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2017\/10\/edopedia_icon_text_10.jpg","contentUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2017\/10\/edopedia_icon_text_10.jpg","width":400,"height":100,"caption":"Edopedia"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/person\/3951cb19e3aa56df09e408c98aa02339","name":"Furqan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e5e68aef3ad8f0b83d56f4953c512c8e57bd2e6dc64daec33b5d0495d9058f51?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e5e68aef3ad8f0b83d56f4953c512c8e57bd2e6dc64daec33b5d0495d9058f51?s=96&d=mm&r=g","caption":"Furqan"},"description":"Well. I've been working for the past three years as a web designer and developer. I have successfully created websites for small to medium sized companies as part of my freelance career. During that time I've also completed my bachelor's in Information Technology.","sameAs":["http:\/\/www.edopedia.com\/blog\/","trulyfurqan"],"url":"https:\/\/www.edopedia.com\/blog\/author\/furqan\/"}]}},"_links":{"self":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts\/2856","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/comments?post=2856"}],"version-history":[{"count":0,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts\/2856\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/media\/2860"}],"wp:attachment":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/media?parent=2856"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/categories?post=2856"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/tags?post=2856"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}