百度360必应搜狗淘宝本站头条
梦幻诛仙表情包mydisktest_v298document.appendchild头像打包下载sql 日期比较
当前位置：网站首页 > 技术文章 > 正文
实现PDF的预览和下载功能（实现pdf的预览和下载功能的方法）

实现PDF的预览和下载功能（实现pdf的预览和下载功能的方法）

  • 网站名称：实现PDF的预览和下载功能（实现pdf的预览和下载功能的方法）
  • 网站分类：技术文章
  • 收录时间：2025-08-07 13:39
  • 网站地址：

进入网站

“实现PDF的预览和下载功能（实现pdf的预览和下载功能的方法）” 网站介绍

实例简介

本例分享实现PDF的预览和下载功能，预览分两种方法。

功能实现

1、利用a标签实现预览和下载功能

对于需求要求不高是比较方便的方法，因为预览功能在部分手机端是下载效果，代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <title>预览下载PDF</title>
</head>

<body>
  <a href="./test.pdf" target="_blank">预览</a>
  <a href="./test.pdf" download="test" target="_blank">下载</a>
</body>

</html>

2、利用pdf.js组件实现预览功能

对于需求要求比较高可以利用pdf.js组件，可以兼容不同手机端同样的预览效果，代码如下：

1、必须部署后才能正常使用预览功能；

2、fileUrl为预览文件地址，如果非“pdfjs/web”下的文件，需要使用部署路径，如代码。


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <title>预览下载PDF</title>
</head>

<body>
  <a href="javascript:;" onclick="previewPdf()">预览</a>
  <script>
  function previewPdf() {
    var fileUrl = '/study/js/previewPDF/test.pdf';
    window.open('./pdfjs/web/viewer.html?file=' + fileUrl);
  }
</script>
</body>

</html>

Tips：

pdf.js下载地址：
http://mozilla.github.io/pdf.js/getting_started/#download；

目录架构如下图：

更多相关网站

最近发表
标签列表
滇ICP备2024046894号-30