前端预览docx、xlsx、pptx、pdf等文件 - IT评测·应用市场-qidao123.com技术社区

/**
* 获取文件流用于预览
*/
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>

复制代码