上一篇
如何下载HTML页面内容？具体步骤和工具大揭秘
下载可以通过多种方式实现,以下是一些常见的方法：
使用<a>标签的download属性
在HTML中,你可以通过<a>标签的download属性来提示浏览器下载链接的内容，而不是在浏览器中打开它，以下是一个示例：
<a href="example.pdf" download="downloaded_file.pdf">Download PDF</a>
在这个例子中,当用户点击链接时，浏览器会提示下载名为downloaded_file.pdf的文件。
使用JavaScript创建下载链接
你也可以使用JavaScript来创建一个临时的下载链接,然后使用<a>标签来触发下载，以下是一个示例：
在这个例子中,点击按钮后，JavaScript会创建一个包含文本内容的Blob对象，然后将其转换为URL，并创建一个临时的<a>标签来触发下载。
使用fetch API下载文件
fetch API允许你以编程方式获取资源，以下是一个使用fetch API下载文件的示例：
<button onclick="downloadWithFetch()">Download File with Fetch</button> <script> function downloadWithFetch() { fetch('example.pdf') .then(response => response.blob()) .then(blob => { var url = window.URL.createObjectURL(blob); var a = document.createElement('a'); a.style.display = 'none'; a.href = url; a.download = "downloaded_file.pdf"; document.body.appendChild(a); a.click(); window.URL.revokeObjectURL(url); }) .catch(error => console.error('Error:', error)); } </script>
在这个例子中,点击按钮后，JavaScript会使用fetch API请求一个PDF文件，然后将其转换为Blob对象，并创建一个临时的<a>标签来触发下载。
使用XMLHttpRequest下载文件
如果你不想使用fetch API，可以使用XMLHttpRequest来下载文件，以下是一个示例：
<button onclick="downloadWithXHR()">Download File with XMLHttpRequest</button> <script> function downloadWithXHR() { var xhr = new XMLHttpRequest(); xhr.open('GET', 'example.pdf', true); xhr.responseType = 'blob'; xhr.onload = function() { if (this.status === 200) { var url = window.URL.createObjectURL(this.response); var a = document.createElement('a'); a.style.display = 'none'; a.href = url; a.download = "downloaded_file.pdf"; document.body.appendChild(a); a.click(); window.URL.revokeObjectURL(url); } }; xhr.send(); } </script>
在这个例子中,点击按钮后，JavaScript会使用XMLHttpRequest请求一个PDF文件，并在请求成功后创建一个临时的<a>标签来触发下载。
FAQs
Q1: 如何在HTML中下载图片？
A1: 你可以使用<a>标签的download属性来下载图片，以下是一个示例：
<a href="example.jpg" download="downloaded_image.jpg">Download Image</a>
当用户点击链接时,浏览器会提示下载名为downloaded_image.jpg的图片。
Q2: 如何在HTML中下载视频？
A2: 与图片类似，你可以使用<a>标签的download属性来下载视频，以下是一个示例：
<a href="example.mp4" download="downloaded_video.mp4">Download Video</a>
当用户点击链接时,浏览器会提示下载名为downloaded_video.mp4的视频。
