时间戳

首页 > 解决方案 > 使用 pdf.js 查看生成的 base64 PDf 文件？

php - 使用 pdf.js 查看生成的 base64 PDf 文件？

问题描述

我正在尝试在以 PHP 呈现的页面中查看生成的 PDF。该 PDF 文件实际上在服务器上不存在，因此该文件没有 URL。我遇到的问题是 FireFox 查看器工作正常（内置的工作正常），但 Chrome 浏览器没有，因为它在用户尝试下载文件时使用 URL，并且 URL 没有附加文件名因为无法通过 URL 访问该文件。在 Firefox 中，如果我发送如下标头，它就可以工作：

header('Content-type:' . $mimetype); // application/pdf
header('Content-disposition: ' . $disposition . '; filename="'.$filename.'"');
header('content-Transfer-Encoding:binary');
header('Accept-Ranges:bytes');
readfile($targetfile);  // the path to the PDF, outside of server root.

我正在寻找的替代方案是使用 Mozilla pdf.js 库，以便 Mozilla 查看器可用于所有浏览器，这会很好，因为 Mozilla 查看器很好，如果使用该库，我将获得一些其他功能。

我看了一些关于 SO 的其他帖子。

如何使用 PDF.js 显示 PDF 中的所有页面（存储在 base64 中）？

pdf.js 使用 base64 渲染为 PDF

这不起作用，没有 PDF，但是 js 文件正在加载，它只显示某种没有 PDF 的通用查看器代码。

web 目录中的 viewer.html 文件开头为：

See https://github.com/adobe-type-tools/cmap-resources
-->
<html dir="ltr" mozdisallowselectionprint>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!--#if GENERIC || CHROME-->
    <meta name="google" content="notranslate">
<!--#endif-->
<!--#if GENERIC-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--#endif-->
    <title>PDF.js viewer</title>

这就是我从第一个参考资料改编的内容。

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">    
    <script src="/js/pdf.js-master/src/pdf.js"></script>
    <script src="/js/pdf.js-master/web/pdfjs.js"></script>
    <link src ="/js/pdf.js-master/web/viewer.css">
</head>
  <body>
    <iframe id="pdfFrame" style="width:900px;height:1000px;"></iframe>
    <script>
        function base64ToUint8Array(base64) {
            var raw = atob(base64);
            var uint8Array = new Uint8Array(raw.length);
            for (var i = 0; i < raw.length; i++) {
              uint8Array[i] = raw.charCodeAt(i);
            }
            return uint8Array;
          }
        var pdfData = base64ToUint8Array("<?php echo $output; ?>");
        var pdfViewerFrame = document.getElementById("pdfFrame");
        pdfViewerFrame.onload = function() {
            pdfViewerFrame.contentWindow.PDFViewerApplication.open(pdfData);
        }
        pdfViewerFrame.setAttribute("src","/js/pdf.js-master/web/pdf_viewer.js?file=");     
    </script>
  </body>
</html>

任何建议表示赞赏。base_viewer.js 位于 master 包的 web 文件夹中，与 viewer.html 文件相同的目录。我没有尝试嵌入对象或 iframe，但我可能会遇到文件名丢失的问题，就像在 Chrome 中一样。

当我通过控制器发布时，我从文件中获取要使用的文件名。该文件不在网络根目录中，这就是为什么它是在没有 URL 的情况下动态创建的。

$path_parts = pathinfo($targetfile);
$mimetype = self::getMimeType($path_parts['extension']);
$disposition = $_POST['disposition'];

出于某种原因，当您仅使用标题进行渲染时：

header('Content-type:' . $mimetype);
header('Content-disposition: ' . $disposition . '; filename="'.$filename.'"');
header('content-Transfer-Encoding:binary');
header('Accept-Ranges:bytes');
readfile($targetfile);

Firefox 保留文件名，但 Chrome 查看器使用来自 URL slug 的名称，这不是实际 PDF 的 URL。$filename = $path_parts['basename'];

这只是给出了一个错误：

/* Copyright 2014 Mozilla Foundation
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import { BaseViewer } from "./base_viewer.js";
import { shadow } from "pdfjs-lib";

class PDFViewer extends BaseViewer {

... ...

可能只是某种配置问题

标签： phppdfpdfjs

解决方案

推荐阅读