前端实现pdf文件下载和预览

最新推荐文章于 2025-03-18 10:15:19 发布

墨渧

最新推荐文章于 2025-03-18 10:15:19 发布

阅读量1.1k

点赞数

文章标签：前端 javascript pdf 下载预览

本文链接：https://blog.youkuaiyun.com/m0_37732829/article/details/122338575

版权

本文介绍如何在前端使用JavaScript技术实现PDF文件的下载和预览功能，包括利用FileReader API读取文件内容，以及借助HTML5的Object Tag或PDF.js库进行预览。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<body>
<head>
<script>
getBlob = (url) => {
    return new Promise(resolve => {
      const xhr = new XMLHttpRequest();

      xhr.open('GET', url, true);
      xhr.responseType = 'blob';
      xhr.onload = () => {
        if (xhr.status === 200) {
          resolve(xhr.response);
        }
      };

      xhr.send();
    });
}
saveAs = (blob, filename) => {
    if (window.navigator.msSaveOrOpenBlob) {
      navigator.msSaveBlob(blob, filename);
    } else {
      const link = document.createElement('a');
      const body = document.querySelector('body');

      link.href = window.URL.createObjectURL(blob);
      link.download = filename;

      // fix Firefox
      link.style.display = 'none';
      body.appendChild(link);

      link.click();
      body.removeChild(link);

      wi