1.PDF.js
pdf配置文件文件下载
2.pdf.js使用
vue项目中需要把此pdf整个文件放在public文件下,没有就新建一个,这里文件的路径就是预览pdf时的路径
使用方式
可以使用iframe内嵌预览,也可以使用window.open打开一个页面预览
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>pdf预览</title>
</head>
<body>
<button onclick="cli()">打开新页面预览</button>
<!-- iframe内嵌预览 -->
<iframe scrolling="no" ref="mainiframe" src="/static/pdf/web/viewer.html?file=http://127.0.0.1:5500/123.pdf" style="height: 600px; width: 100%"></iframe>
</body>
</html>
<script>
//http://127.0.0.1:5500/123.pdf 为本地打开pdf的地址 可以是后端接口返回的地址
function cli(){
window.open('/static/pdf/web/viewer.html?file=http://127.0.0.1:5500/123.pdf', '_blank')
}
</script>