实现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；
目录架构如下图：
