
この記事でできるようになること
- Webページ内のすべてのPDFリンクを一括ダウンロードできるようになる
- ブラウザでPDFファイルを開かずに直接ダウンロードさせる設定ができるようになる
- JavaScriptを使ってaタグにdownload属性を付与する方法を理解できる
- ブラウザの「名前をつけて保存」ダイアログを省略する設定ができるようになる
- URLからファイル名を抽出する方法を学べる
※複数ページを横断して実行する場合は以下記事を参考にサブウィンドウを活用してみてください
サンプルコード: ページ内のすべてのPDFリンクにdownload属性付与して開く
F12でブラウザコンソールを開いてコピペで動きます
// ファイル名取得関数 const getFilename = url => new URL(url).pathname.split('/').pop(); // スリープ関数 const sleep = ms => new Promise(resolve => setTimeout(resolve, ms)); // PDFファイルのaタグにdownload属性を付与 const links = [...document.querySelectorAll("a")] .filter(a => /\.pdf/.test(a.href)) .map(a => { const fileName = getFilename(a.href); a.setAttribute("download", fileName); a.setAttribute("target", "_blank"); return a; }); // 全てのリンクを順番にクリック for (const link of links){ await sleep(1000); console.log(link.href); link.click(); }続きを読む
