前端预览docx、xlsx、pptx、pdf等文件

刘俊凯 · 4 天前

如果是有域名的就使用office在线链接

可以使用office的网页版预览链接，直接在src后面添加在线的文件链接免费的 Microsoft 365 Online | Word、Excel、PowerPoint借助 Microsoft 365 网页版，可使用 Web 浏览器在设备上编辑和共享 Word、Excel、PowerPoint 和 OneNote 文件。

https://view.officeapps.live.com/op/embed.aspx?src=
最精确的方法是通事后端获取文档流返回给前端。doc、ppt等旧的格式就需要后端传递文档流，纯前端的话下面的插件是jquery的，算是我找到比力好用的预览文件插件了。
下面是thinkphp获取文档流返回给前端的方法

/**
* 获取文件流用于预览
*/
public function getFileStream(){
$id = $this->request->param('id');
$filePath = Db::name('xxx')->where('id',$id)->value('upfile');
// 获取文件的MIME类型（这里需要您自己实现一个函数来获取正确的MIME类型，或者使用第三方库）
// 为了简单起见，这里我们假设它是application/octet-stream（二进制流）
$mimeType = 'application/octet-stream'; // 或者使用更具体的MIME类型，如'image/jpeg'
// // 构建文件的绝对路径（这里假设 /uploads/ 是相对于 public 目录的）
$absolutePath = ROOT_PATH . 'public/' . ltrim($filePath, '/');
// 读取文件内容到缓冲区（在实际应用中，您可能希望逐块读取文件以节省内存）
$fileContent = file_get_contents($absolutePath);
// 创建响应对象
$response = new Response($fileContent);
// 设置响应头部信息
$response->header('Content-Type', $mimeType);
// 如果不希望触发下载，则不要设置Content-Disposition为attachment
// 但为了示例，我们仍然设置一个filename，尽管它不会触发下载
// 注意：URL编码在PHP中通常不需要在这里做，因为HTTP头部值会自动处理
// $response->header('Content-Disposition', 'inline; filename="' . $filename . '"');
$response->header('Content-Length', strlen($fileContent));
// 设置字符编码（对于文本文件很重要，对于二进制文件则通常不需要）
// $response->header('Content-Encoding', 'UTF-8'); // 注意：这通常用于压缩，不是字符编码
return $response;
}

复制代码

前端获取文档流

<html>
<head>
<script src="../public/javascripts/docx-preview.js"></script>
<script src="../public/javascripts/jszip.min.js"></script>
<script src="../public/javascripts/docx-preview.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<button id="loadButton">Load and Preview Docx</button>
<div id="previewContainer"></div>
<script>
$(document).ready(function() {
var container = document.getElementById("previewContainer");
$('#loadButton').click(function() {
$.ajax({
url: 'https://xxx.xxxx.cn/api/common/getFileStream/id/26714', // 后端提供 .docx 文件的二进制数据的端点
type: 'GET', // 或 'POST'，取决于你的服务器配置
xhrFields: {
responseType: 'blob' // 告诉 jQuery 我们期望返回一个 Blob 对象
},
success: function(data, status, xhr) {
docx.renderAsync(data,container); // 渲染到页面
},
error: function(xhr, status, error) {
// 处理错误
console.error('Error fetching docx file:', error);
}
});
});
});
</script>
</body>

复制代码

如果是当地的链接127.0.0.1的文件地点，大概ip地点的文件。

其他文件比如pdf、docx、xlsx、pptx等可以用下面的插件，内里有阐明文档
文件预览插件

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

		自动登录	找回密码
密码			立即注册

前端预览docx、xlsx、pptx、pdf等文件

本帖子中包含更多资源

0 个回复

快速回复

楼主热帖

标签云

浏览过的版块