隐藏嵌入 pdf 周围的工具栏？

Question

虽然我认为答案可能在另一个问题关于pdf规范的答案中，但是否可以不显示嵌入的pdf文档中的adobe acrobat工具栏？

Answer 1

如果您使用除 Firefox 浏览器之外的任何浏览器，则以下代码将嵌入一个不带任何工具栏的 PDF 文件：

<embed
  src="http://URL_TO_PDF.com/pdf.pdf#toolbar=0&navpanes=0&scrollbar=0"
  width="425" height="425" />

• 请注意，这不适用于 Firefox
• 有关详细信息，请参阅网页设计师指南博客文章。
• 请参阅嵌入式标签参数的完整列表，了解更多信息。

Answer 2

您可以使用#toolbar隐藏上面的工具栏..如果工具栏=0，它将禁用它..当工具栏=1时，这将启用它..希望它会起作用。这对我有用

<embed src="filename.pdf#toolbar=0" width="500" height="375"> (Disable toolbar)
<embed src="path/filename.pdf#toolbar=1" width="500" height="375"> (Enable toolbar

Answer 3

无法保证在 URL 中使用 #toolbar=0

 会起作用，因为这是使用 Adobe 查看器的浏览器所独有的，其他查看器甚至可能具有类似的参数来保持兼容性，但肯定不是每个人都遵循这一点，例如 MacOS 浏览器或 Linux 浏览器。

在大多数浏览器中，可以更改视图，这也可能不适用于

#toolbar=0

，因为查看器与浏览器不同，例如 Firefox 内部有自己的查看器，并且不适用于此 

#toolbar=0

，查看结果：

<iframe
    src="sample.pdf#toolbar=0"
    width="900"
    height="200"
></iframe>

<br>

<embed type="application/pdf"
    src="sample.pdf#toolbar=0"
    width="900"
    height="200"
>

即使它可以在 Firefox 和带有扩展的 Chrome 中运行，也可以将 PDF 查看器更改为任何可能不支持此参数的其他浏览器。

即使你可以删除所有你想要的按钮，你仍然可以复制你的PDF或图像，因为所有内容都在渲染之前下载到你的计算机上，用户只需按

F12即可打开DevTools（Chrome / Firefox） ），查看网络选项卡并过滤它以获取当前页面上加载的所有 PDF，然后通过 DevTools 它将 PDF 复制到其任何文件夹。

没有办法阻止，只能阻止。正如已经看到的“iframe”和“embed”都不能解决问题，

我建议（这只是一个建议）使用PDF.js。

因此您可以创建自己的按钮、导航等，一切都将在

<canvas>

 中运行，例如：

var url = 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf';

var pdfjsLib = window['pdfjs-dist/build/pdf'];

pdfjsLib.GlobalWorkerOptions.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';

var pdfDoc = null,
    pageNum = 1,
    pageRendering = false,
    pageNumPending = null,
    scale = 1.5,
    canvas = document.getElementById('pdf-example'),
    ctx = canvas.getContext('2d');


function renderPage(num) {
  pageRendering = true;

  pdfDoc.getPage(num).then(function(page) {
    var viewport = page.getViewport({scale: scale});
    canvas.height = viewport.height;
    canvas.width = viewport.width;

    var renderContext = {
      canvasContext: ctx,
      viewport: viewport
    };
    var renderTask = page.render(renderContext);

    renderTask.promise.then(function() {
      pageRendering = false;
      if (pageNumPending !== null) {
        renderPage(pageNumPending);
        pageNumPending = null;
      }
    });
  });

  document.getElementById('page_num').textContent = num;
}


function queueRenderPage(num) {
  if (pageRendering) {
    pageNumPending = num;
  } else {
    renderPage(num);
  }
}

/**
 * show previous page
 */
function onPrevPage() {
  if (pageNum > 1) {
    pageNum--;
    queueRenderPage(pageNum);
  }
}

document.getElementById('prev').addEventListener('click', onPrevPage);

/**
 * show next page
 */
function onNextPage() {
  if (pageNum < pdfDoc.numPages) {
    pageNum++;
    queueRenderPage(pageNum);
  }
}

document.getElementById('next').addEventListener('click', onNextPage);

/**
 * PDF async "download".
 */
pdfjsLib.getDocument(url).promise.then(function(pdfDoc_) {
  //Set loaded PDF to main pdfDoc variable
  pdfDoc = pdfDoc_;

  //Show number of pages in document
  document.getElementById('page_count').textContent = pdfDoc.numPages;

  renderPage(pageNum);
});

#pdf-example {
    border: 1px solid black;
}

<script src="//mozilla.github.io/pdf.js/build/pdf.js"></script>

<div>
  <button id="prev">Previous page</button>

  <button id="next">Next page</button>

  <span>Page: <span id="page_num"></span> / <span id="page_count"></span></span>
</div>

<canvas id="pdf-example"></canvas>

请注意，我使用

1.5

 来缩放：

 scale = 1.5,

 ...

 var viewport = page.getViewport({scale: scale});

您可以根据需要更改此设置。我建议你根据视口测量来调整它（你可以使用

window.innerWidth

来计算），但也要进行最小测量，这样它就会适应不同的分辨率。

Answer 4

这对我有用，可以在React应用程序中隐藏pdf打印视图

<iframe src={`${resumeUrl}#toolbar=0`} width="100%" height={500} />

Answer 5

是的，您可以实现无缝嵌入。 现在可以在 2023 年使用 Adobe Acrobat API：

https://developer.adobe.com/document-services/apis/pdf-embed/

您需要在此处获取免费的 API 密钥才能将脚本集成到您的域。

UI 自定义：

https://developer.adobe.com/document-services/docs/overview/pdf-embed-api/howtos_ui/

代码示例：

<div id="adobe-dc-view" style="height: 360px; width: 500px;"></div>
<script src="https://acrobatservices.adobe.com/view-sdk/viewer.js"></script>
<script type="text/javascript">
    document.addEventListener("adobe_dc_view_sdk.ready", function(){ 
        var adobeDCView = new AdobeDC.View({clientId: "<YOUR_CLIENT_ID>", divId: "adobe-dc-view"});
        adobeDCView.previewFile({
            content:{location: {url: "https://acrobatservices.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf"}},
            metaData:{fileName: "Bodea Brochure.pdf"}
        }, {embedMode: "SIZED_CONTAINER"});
    });
</script>

此外，您还可以启用小型覆盖消失工具栏来下载/打印/转到页面等。尽情享受！