时间戳

首页 > 解决方案 > Chrome 显示高度有限的 PDF

css - Chrome 显示高度有限的 PDF

问题描述

考虑这份文件。

在 Firefox 上，一切都很好： 在此处输入图像描述

但是，在 Chrome 上，文档高度是有限的： 在此处输入图像描述

我正在使用（旧版本的）Hugo 生成网站。有谁知道是什么原因造成的？

标签： cssgoogle-chromepdfcontent-security-policyhugo

解决方案

在 Chrome 中打开开发者控制台，您会看到一些错误。没有想到先做这个，因为它只是一个PDF，有什么问题呢？出色地，

Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-[redacted]'), or a nonce ('nonce-...') is required to enable inline execution.

(5) Refused to load the image '<URL>' because it violates the following Content Security Policy directive: "img-src 'self'".

这就是 HTTP 响应的样子。

> GET /pdf/impulsiv138.pdf HTTP/1.1
> Host: impulsiv.fs.tum.de
> User-Agent: curl/7.58.0
> Accept: */*
>
< HTTP/1.1 200 OK
< Date: Sun, 21 Jun 2020 05:52:33 GMT
< Server: Apache
< Last-Modified: Mon, 15 Jun 2020 15:36:36 GMT
< ETag: "4805f5-5a821312d6900"
< Accept-Ranges: bytes
< Content-Length: 4720117
< Strict-Transport-Security: max-age=15552000
< X-Frame-Options: deny
< X-Content-Type-Options: nosniff
< Content-Security-Policy: default-src 'none'; img-src 'self'; style-src 'self'; script-src 'self'; object-src 'self';
< Content-Type: application/pdf
<

您的 HTTP 服务器正在填写该Content-Security-Policy标头，要么由您明确填写，要么来自您的主机的一些默认设置。

经过一番挖掘，Chrome 加载 PDF 似乎是一个常见问题：

我不完全确定更改这些指令意味着什么，但这是你的领导。

如果在浏览器中显示 PDF 不是硬性要求，那么我建议简单地指示浏览器下载它们（请参阅Content-DispositionHTTP 标头）。如果是，那么我会尝试制作一个页面来包装 PDF 并将其显示在那里，也许你有更多的控制权。

推荐阅读