时间戳

首页 > 解决方案 > 在 Django 模板中使用 ViewerJS 显示 office 文件或 pdf 文件

javascript - 在 Django 模板中使用 ViewerJS 显示 office 文件或 pdf 文件

问题描述

我正在尝试在 Django 3.1 应用程序中使用 ViewerJS，以便在 Django 模板中显示办公文档或 pdf。

我创建的网址是

http://localhost:8000/static/js/ViewerJS/index.html/#..media/files/Materials.pdf

这会生成：

在此处输入图像描述

也就是说，它会提升 index.html 文件，但仅此而已。当我查看开发者控制台 -> 网络时，我看到许多查看器 js 项都没有找到，我明白这就是演示失败的原因。

ViewerJS 位于 static/js/ViewerJS

在此处输入图像描述

在模板中我尝试了这两种方法：

<a href="/static/js/ViewerJS/media/archivos/Materiales.pdf" class="btn">Preview</a>

<iframe src = "/static/js/ViewerJS/index.html/#../media/archivos/Materiales.pdf" width='700' height='550' allowfullscreen webkitallowfullscreen></iframe>

如果您知道另一种解决方案，我可以通过它来做我需要的事情并且它不是 ViewerJs，那么欢迎。

但两者都不起作用。

标签： javascripthtmldjangopdf-viewer

解决方案

对于 PDF 文件，我使用PDF.js。只需下载静态文件夹中的源代码并将 pdf 指向查看器。像这样：

<iframe src="{% static 'assets/pdfjs/web/viewer.html' %}?file={{your.file.url}}" width="100%" height="100%" frameborder="0">

它适用于我的pdf。它不适用于办公文件。

推荐阅读