WebサイトにPDF資料のダウンロード機能を実装する3つのやり方｜Webサイト制作 / CMS・MAツール

Webサイト制作

WebサイトにPDF資料のダウンロード機能を実装する3つのやり方

# Webマーケティング

# リード獲得

2022.08.12

今すぐ試せる、CVR改善リストを無料配布中！

CVRを今すぐ改善したい担当者様へ。業界別のCVR平均値をもとに、CVR改善ポイントを15個リストアップした資料をご用意しました。この後の業務からぜひご活用ください。

無料でダウンロードする

Webサイトで販売促進や売上向上を図る企業にとって、 営業活動の一部を自動化できるダウンロード機能は、重要な要素の一つではないでしょうか。

ダウンロード機能を実装すれば、自社の発信を自動でアピールできるため、人材コストの削減も可能です。

そこで今回は、Webサイトにダウンロード機能を実装するやり方を3つ紹介します。

必要な箇所だけ変更すればすぐに使えるサンプルコードも記述していますので、プログラミングの専門的な知識がなくても大丈夫です。

PC作業が苦手なかたに最適な、おすすめの方法もお伝えします。ぜひ最後までご確認ください。

PDFなどの資料をダウンロードしてもらう3つのやり方

Webサイトから資料をダウンロードしてもらう方法は主に次の3つです。

1. CMSの機能を使用

2. HTML5を使用

3. JavaScriptを使用

CMSを使う方法がもっとも簡単で、JavaScriptは難易度が高めです。JavaScriptはプログラミングの知識がないと導入が難しいかもしれません。

専属のエンジニアがいない、アサインできないケースではCMSの活用をおすすめします。

ダウンロード機能が標準搭載されたCMSに乗り換える

CMSとは「Contents Management System（コンテンツ・マネジメント・システム）」の略で、管理画面などを使って、 簡単にWebサイトの運営ができるシステムです。

関連記事：CMSとは？導入によるメリットやデメリット、選び方を解説

HTMLやCSSのコーディングやプログラミングの知識がなくても、Webサイトの作成や更新作業が容易にできます。

ところが扱いの簡単なCMSでも、ダウンロード機能を実装するためにはプラグインの導入やHTMLやJavaScriptなど、ソースコードの記述が必要なケースもあります。

CMSの中にはLeadGridのようにダウンロード機能が標準搭載されているタイプもあるため、そちらを選べばPC初心者やプログラミングの知識がなくても簡単に扱えるでしょう。

LeadGridはリード獲得に特化したCMSのため、ダウンロード機能の他にもフォーム管理機能やウェビナー機能の利用も可能です。機能詳細はサービス資料をご覧ください。

HTML5を使用した簡単な方法｜初心者向き

CMSを導入しない場合、ダウンロード機能の実装はHTMLを使いましょう。

後述するJavaScriptに比べると、 プログラミングの専門知識があまり求められないため、取り入れやすい方法です。

HTML5ではa要素にdownload属性が追加されたため、以前より簡単に実装できるようになりました。

記述の方法は次のとおりです。

<a href="ダウンロードしてもらいたいファイルのurl" download="ダウンロードのときに表示するファイル名">表示するテキスト</a>

こちらの方法を使えば、 ほぼすべての形式の画像や資料のファイルをダウンロードしてもらえます。

JavaScriptを使用した方法｜中級者向き

JavaScriptを使用したソースコードの例を解説します。

Macの場合はターミナル、Windowsの場合はコマンドプロンプトに次のコマンドを打ち込み、コーディングの準備をします。

mkdir javascript-download-file
cd javascript-download-file
touch index.html main.js

次に好みのエディターを開き、HTMLを下記のように記述します。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScriptでダウンロードする方法</title>
  </head>
  <body>
    <h1>JavaScriptでダウンロードする方法</h1>
    <p>ダウンロードボタンをクリックしてください</p>
    <button type="button" id="download">ダウンロード</button>
    <script src="main.js"></script>
  </body>
</html>

この中にある＜title＞や＜h1＞＜p＞タグ内には表示したい文字を入力します。

    <title>JavaScriptでダウンロードする方法</title>
  </head>
  <body>
    <h1>JavaScriptでダウンロードする方法</h1>
    <p>ダウンロードボタンをクリックしてください</p>

下記の「ダウンロード」はクリックするボタン内に表示する文字です。必要に応じて変更するとよいでしょう。

    <button type="button" id="download">ダウンロード</button>

続いてJavaScriptのコーディングです。下記のように入力します。

main()


function main () {
  const download = document.querySelector('#download')


  download.addEventListener('click', (event) => {
    event.preventDefault()


    const text = 'テスト'
    const blob = new Blob([データ], {type: ファイルタイプ'})
    const url = URL.createObjectURL(blob) // <1>


    const anchor = document.createElement('a')
    anchor.setAttribute('href', url)
    anchor.setAttribute('download', 'ファイル名.txt') // <2>


    const mouseEvent = new MouseEvent('click', {
      bubbles: true,
      cancelable: true,
      view: window,
    })


    anchor.dispatchEvent(mouseEvent) // <3>
  })
}

ダウンロードしてもらうデータファイルによって、下記の「テスト」「データ」「ファイルタイプ」を入力しましょう。

const text = 'テスト'
const blob = new Blob([データ], {type: ファイルタイプ'})

たとえば、ダウンロードするのがテキストの場合は

  const text = 'テスト'
    const blob = new Blob([text], {type: 'text/plain'})
   const url = URL.createObjectURL(blob) // <1>

このようにすると「テスト」のテキストがダウンロードできます。

下記の「ファイル名」は、ダウンロードされたときのファイル名称ですので、任意のファイル名に変更しましょう。

anchor.setAttribute('download', 'ファイル名.txt') // <2>

動作確認をして問題がなければ作業完了です。

＜JavaScript完成例＞

main()


function main () {
  const download = document.querySelector('#download')


  download.addEventListener('click', (event) => {
    event.preventDefault()


    const text = 'テスト'
    const blob = new Blob([text], {type: 'text/plain'})
    const url = URL.createObjectURL(blob) // <1>


    const anchor = document.createElement('a')
    anchor.setAttribute('href', url)
    anchor.setAttribute('download', 'ファイル名.txt') // <2>


    const mouseEvent = new MouseEvent('click', {
      bubbles: true,
      cancelable: true,
      view: window,
    })


    anchor.dispatchEvent(mouseEvent) // <3>
  })
}