隐藏嵌入式pdf的工具栏?

lee*_*d00 32 html embed pdf toolbars

虽然我认为答案可能在另一个问题的pdf规范的答案中,是否有可能不在嵌入式pdf文档中显示 adobe acrobat工具栏?

lee*_*d00 49

以下代码将嵌入一个没有任何工具栏的pdf:

<embed src="http://URL_TO_PDF.com/pdf.pdf#toolbar=0&navpanes=0&scrollbar=0" width="425" height="425">
Run Code Online (Sandbox Code Playgroud)

有关详细信息,请参阅此博客:http://blogs.adobe.com/pdfdevjunkie/2007/08/using_the_html_embed_tag_to_di.html

有关嵌入式标记的完整参数列表,请参阅:http:
//www.adobe.com/content/dam/Adobe/en/devnet/acrobat/pdfs/pdf_open_parameters.pdf

  • 在Firefox中不起作用,知道任何替代方案吗? (8认同)
  • 更正:它仍然对我有用,但前提是我使用所有这些参数:#toolbar=0&amp;navpanes=0&amp;scrollbar=0&amp;statusbar=0&amp;messages=0&amp;scrollbar=0 (4认同)
  • 为什么不提出另一个问题来引用这个以及您用来测试的Firefox/Adob​​e Acrobat的版本? (2认同)
  • Adobe要我注册,你能用完整的参数列表编辑你的帖子吗? (2认同)
  • @leeand00 这对于客户端仅使用 Chrome 的开发人员很有帮助。此外,这也适用于非技术人员。技术人员呢?他/她将在 URL 中添加 #toolbar=1,然后下载 pdf。 (2认同)

小智 10

您可以使用#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
Run Code Online (Sandbox Code Playgroud)

  • 我将其与像 `&lt;embed [attr.src]="dataLocalUrl+'#toolbar=0'" width="100%" height="80%"/&gt;` 这样的网址一起使用。但工具栏仍然在那里。你对此有什么想法吗?(我在 Angular 中使用这个) (4认同)

Gui*_*nto 6

没有保证,使用#toolbar=0的URL会的工作,因为这是独家使用Adobe浏览器的浏览器,它可能是其他观众甚至也有类似的参数,以保持兼容性,但肯定不是每个人都遵循的是,如适用于MacOS浏览器浏览器或 Linux。

在大多数浏览器中,可以更改视图,这也可能不适用于#toolbar=0,因为查看器与浏览器无关,例如 Firefox 内部有自己的查看器,但不适用于 this #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"
>
Run Code Online (Sandbox Code Playgroud)

Firefox 原生 pdf 查看器

即使它在 Firefox 和带有扩展的 Chrome 中工作,也可以将 PDF 查看器更改为可能不支持此参数的任何其他内容。

即使您可以删除您想要的所有按钮,您仍然可以复制您的 PDF 或图像,因为在渲染之前所有内容F12都已下载到您的计算机,用户只需按下即可打开 DevTools(Chrome / Firefox),查看网络选项卡和过滤它以获取当前页面上加载的所有 PDF,并通过 DevTools 将 PDF 复制到它的任何文件夹。

没有办法阻止,只有阻碍。正如已经看到的,“iframe”和“embed”都无法解决,我建议(这只是一个建议)使用PDF.js

因此,您可以创建自己的按钮、导航等,一切都将在 中运行<canvas>,例如:

<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"
>
Run Code Online (Sandbox Code Playgroud)
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);
});
Run Code Online (Sandbox Code Playgroud)
#pdf-example {
    border: 1px solid black;
}
Run Code Online (Sandbox Code Playgroud)

请注意,我曾经1.5缩放:

 scale = 1.5,

 ...

 var viewport = page.getViewport({scale: scale});
Run Code Online (Sandbox Code Playgroud)

您可以根据需要更改此设置。建议大家根据视口测量(可以window.innerWidth用来计算)进行调整,也可以做一个最小测量,这样会适应不同的分辨率。