专业编程基础技术教程

网站首页 > 基础教程 正文

实现PDF的预览和下载功能 pdf预览快捷键是什么

ccvgpt 2024-11-04 12:28:11 基础教程 76 ℃

实例简介

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

功能实现

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

实现PDF的预览和下载功能 pdf预览快捷键是什么

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

<!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；

目录架构如下图：

Tags：

猜你喜欢

最近发表
标签列表