viewerjs动态加载
时间: 2023-11-10 08:56:38 浏览: 36
ViewerJS是一个开源的JavaScript库,它提供了一个HTML5文档查看器。您可以使用ViewerJS来查看PDF,ODT,ODP,PPTX,DOCX等文档类型。
要动态加载ViewerJS,您需要执行以下步骤:
1. 在HTML文件中添加ViewerJS的脚本和样式表。
```
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.6.0/viewer.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.6.0/viewer.min.js"></script>
```
2. 创建一个空的div元素作为文档查看器的容器。
```
<div id="viewer"></div>
```
3. 使用JavaScript代码加载文档并将其添加到查看器中。
```
var url = "path/to/document.pdf";
var viewer = new Viewer(document.getElementById('viewer'), {
url: url
});
```
在上面的代码中,您需要将"url"替换为您要加载的文档的URL。请注意,ViewerJS支持的文档类型取决于您的浏览器和操作系统。
4. (可选)您还可以添加其他选项来自定义查看器的行为,例如缩放级别,背景颜色等。有关更多信息,请参阅ViewerJS文档。
```
var viewer = new Viewer(document.getElementById('viewer'), {
url: url,
navbar: false,
toolbar: {
zoomIn: 4,
zoomOut: 4,
oneToOne: 4,
reset: 4,
prev: 2,
play: {
show: 4,
size: 'large',
},
next: 2,
rotateLeft: 4,
rotateRight: 4,
flipHorizontal: 4,
flipVertical: 4,
},
title: false,
tooltip: false,
backdrop: false,
keyboard: false,
movable: false,
zoomable: false,
rotatable: false,
scalable: false,
transition: false,
});
```
上面的代码将禁用查看器的工具栏,标题,提示信息,背景和键盘控制。它还将禁用查看器的可移动性,缩放性,旋转性和可扩展性。它还将禁用查看器的过渡效果。