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

如果是有域名的就使用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>
    <!--polyfills for IE11-->
    <script src="../public/javascripts/docx-preview.js"></script>
    <!--dependencies-->
    <script src="../public/javascripts/jszip.min.js"></script>
    <!--library-->
    <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等可以用下面的插件,里面有说明文档

文件预览插件

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值