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

Posted 2023-02-24

【中文标题】隐藏嵌入式pdf周围的工具栏？

【英文标题】：Hiding the toolbars surrounding an embedded pdf?

【发布时间】：2011-01-07 10:58:29

【问题描述】：

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

【问题讨论】：

找到了！ blogs.adobe.com/pdfdevjunkie/2007/08/…

【参考方案1】：

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

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

请注意，这不适用于 Firefox 有关详细信息，请参阅 Web Designer's Guide 博客文章。 查看embedded tag parameters 的完整列表了解更多信息。

【讨论】：

更正：它仍然对我有用，但前提是我使用所有这些参数：#toolbar=0&navpanes=0&scrollbar=0&statusbar=0&messages=0&scrollbar=0

@leeand00 这对于客户端只使用 chrome 的开发人员很有帮助。此外，这将适用于非技术人员。技术人呢？他/她将在 URL 中设置#toolbar=1，然后下载 pdf。

它适用于我，但需要注意的是，当我刷新（使用 Chrome）时，工具栏会再次出现。我试图找出原因。有谁知道原因吗？

Firefox 内置查看器的选项可以在这里查看github.com/mozilla/pdf.js/wiki/Viewer-options。您可以使用#pagemode=none 隐藏侧边栏，但不能隐藏顶部栏。

添加到@plocks 上面的评论。我无法让 #navpanes=0 自行工作，但我可以在 Chrome 中成功省略 &scrollbar=0。 #pagemode=none 在 Firefox 中对我不起作用，但默认情况下不会显示 Firefox 侧边栏，所以这对我来说不是问题。

【参考方案2】：

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

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

【讨论】：

我将它与<embed [attr.src]="dataLocalUrl+'#toolbar=0'" width="100%" height="80%"/> 之类的网址一起使用。但是工具栏仍然在那里。你对此有什么想法吗？ （我在 Angular 中使用它）

@SMash 你可以这样做this.pdfUrl= this.sanitizer.bypassSecurityTrustResourceUrl(dataLocalUrl+ '#zoom=70&toolbar=0'); 和你的构造函数public sanitizer: DomSanitizer

【参考方案3】：

不保证在 URL 中使用 #toolbar=0 会起作用，因为这是使用 Adob​​e 查看器的浏览器所独有的，可能其他查看器甚至具有类似的参数以保持兼容性，但肯定不是每个人都遵循这一点，例如 MacOS 浏览器或 Linux 的浏览器。

在大多数浏览器中，可以更改视图，这也可能不适用于#toolbar=0，因为查看器与浏览器不同，例如 Firefox 内部有自己的查看器，并且不适用于此#toolbar=0，查看结果：

<iframe
    src="sample.pdf#toolbar=0"
    
    
></iframe>

<br>

<embed type="application/pdf"
    src="sample.pdf#toolbar=0"
    
    
>

即使它可以在 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计算），但也要做一个最小测量，这样会适应不同的分辨率。

【讨论】：

如何隐藏菜单栏中的下载图标？

嗨@AjayTakur！正如我在答案中已经说过的那样，不能保证从 PDF 阅读器插件中删除按钮，唯一有保证的解决方案是使用独立的东西，比如“PDF.js”。试一试，根据您的需要调整示例。