在线预览pdf
2021-11-17 本文已影响0人
IamaStupid
要求在HTML页面中打开PDF
解决方案采用第三方插件pdf.js,但是需要注意：pdf文件和HTML需要在同一个域名下，否则会报跨域的问题。
image.png
下载pdf.js, 里面有一大堆文件,其中web/viewer.html就是一个已经写好的可以预览pdf的html,使用这个viewer.html的方法很简单，就是..../viewer.html?file=..../xxx.pdf这样就可以打开一个pdf了。
具体代码如下：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>预览pdf</title>
<meta name="description" content="">
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src="./js/jquery.js"></script>
<style type="text/css">
body,html {
margin: 0; padding: 0; width: 100%; height: 100%;
}
iframe,#app {
border: 0; width: 100%; height: 100%;
}
</style>
</head>
<body>
<div id="app">
<iframe src=''></iframe>
</div>
<script type="text/javascript">
// http://test.xxx.com/viewPdf/index.html?url=http://test.xxx.com/2020/2021xx11xx1707.pdf
$(document).ready(function() {
let href= window.location.href
let str = href.split('?')[1].split('&')[0].split('=')
if (str.length > 1) {
$('iframe').attr('src', './js/pdf/web/viewer.html?file=' + str[1])
} else {
alert('网页地址没有携带url参数')
}
})
</script>
</body>
</html>
viewPdf这个项目必须部署到服务器上，才能看到效果，部署后，在浏览器中打开index.html:
http://test.xxx.com/viewPdf/index.html?url=http://test.xxx.com/2020/2021xx11xx1707.pdf
