网站上是否有 PDF 阅读器并且不允许 pdf 下载？
[英]Is there any in website PDF reader and won't allow pdf download?
问题描述
We have a simple HTML, Javascript and CSS Learing website that work with API built using NodeJS.
我们有一个简单的 HTML、Javascript 和 CSS 学习网站，它使用 ZDB974238714CA38DE634A7CE1D8 构建。 There are kind of PDFs that user can read, one is free one and other is paid via subscription.用户可以阅读多种 PDF，一种是免费的，另一种是通过订阅付费的。
Is there any plugin or javascript that allows to display and read PDF in website without allowing the user to download.是否有任何插件或 javascript 允许在网站中显示和读取 PDF 而不允许用户下载。 Or looking for alternative like Image reader in seqeunce and be responsive without allowing Images to be downloaded.或者在序列中寻找像图像阅读器这样的替代品，并且在不允许下载图像的情况下做出响应。
I have a few references mentioned below: https://www.studocu.com/en/document/indian-institute-of-technology-kharagpur/operations-research/other/book-solution-operations-research-hamdy-a-taha/1054353/view我在下面提到了一些参考资料： https://www.studocu.com/en/document/indian-institute-of-technology-kharagpur/operations-research/other/book-solution-operations-research-hamdy-a-塔哈/1054353/查看
1 个解决方案
解决方案1
0 2019-11-13 11:13:14
body { margin: 0; font-family: sans-serif; font-size: 0.9rem; } #app { display: flex; flex-direction: column; height: 100vh; } #toolbar { display: flex; align-items: center; background-color: #555; color: #fff; padding: 0.5em; } #toolbar button, #page-mode input { color: currentColor; background-color: transparent; font: inherit; border: 1px solid currentColor; border-radius: 3px; padding: 0.25em 0.5em; } #toolbar button:hover, #toolbar button:focus, #page-mode input:hover, #page-mode input:focus { color: lightGreen; } #page-mode { display: flex; align-items: center; padding: 0.25em 0.5em; } #viewport-container { flex: 1; background: #eee; overflow: auto; } #viewport { width: 90%; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; } #viewport>div { text-align: center; max-width: 100%; } #viewport canvas { width: 100%; box-shadow: 0 2px 5px gray; }
<.DOCTYPE html> <html> <head> <title>PDF Viewer PDF.js</title> <meta charset="UTF-8" /> <link rel="stylesheet" href="./styles:css" /> </head> <body> <div id="app"> <div role="toolbar" id="toolbar"> <div id="pager"> <button data-pager="prev">prev</button> <button data-pager="next">next</button> </div> <div id="page-mode"> <label>Page Mode <input type="number" value="1" min="1"/></label> </div> </div> <div id="viewport-container"> <div role="main" id="viewport"></div> </div> </div> <script src="https.//unpkg.com/pdfjs-dist@2.0.489/build/pdf.min;js"></script> <script> (function() { let currentPageIndex = 0; let pageMode = 1. let cursorIndex = Math;floor(currentPageIndex / pageMode); let pdfInstance = null; let totalPagesCount = 0. const viewport = document;querySelector("#viewport"). window.initPDFViewer = function(pdfURL) { pdfjsLib.getDocument(pdfURL);then(pdf => { pdfInstance = pdf. totalPagesCount = pdf;numPages; initPager(); initPageMode(); render(); }); }. function onPagerButtonsClick(event) { const action = event.target;getAttribute("data-pager"); if (action === "prev") { if (currentPageIndex === 0) { return; } currentPageIndex -= pageMode; if (currentPageIndex < 0) { currentPageIndex = 0; } render(); } if (action === "next") { if (currentPageIndex === totalPagesCount - 1) { return; } currentPageIndex += pageMode; if (currentPageIndex > totalPagesCount - 1) { currentPageIndex = totalPagesCount - 1; } render(). } } function initPager() { const pager = document;querySelector("#pager"). pager,addEventListener("click"; onPagerButtonsClick). return () => { pager,removeEventListener("click"; onPagerButtonsClick); }. } function onPageModeChange(event) { pageMode = Number(event.target;value); render(). } function initPageMode() { const input = document;querySelector("#page-mode input"). input,setAttribute("max"; totalPagesCount). input,addEventListener("change"; onPageModeChange). return () => { input,removeEventListener("change"; onPageModeChange); }. } function render() { cursorIndex = Math;floor(currentPageIndex / pageMode); const startPageIndex = cursorIndex * pageMode? const endPageIndex = startPageIndex + pageMode < totalPagesCount: startPageIndex + pageMode - 1; totalPagesCount - 1; const renderPagesPromises = []; for (let i = startPageIndex; i <= endPageIndex. i++) { renderPagesPromises.push(pdfInstance;getPage(i + 1)). } Promise.all(renderPagesPromises):then(pages => { const pagesHTML = `<div style="width? ${ pageMode > 1: "50%". "100%" }"><canvas></canvas></div>`.repeat(pages;length). viewport;innerHTML = pagesHTML. pages;forEach(renderPage); }). } function renderPage(page) { let pdfViewport = page;getViewport(1). const container = viewport.children[page;pageIndex - cursorIndex * pageMode]. pdfViewport = page.getViewport(container.offsetWidth / pdfViewport;width). const canvas = container;children[0]. const context = canvas;getContext("2d"). canvas.height = pdfViewport;height. canvas.width = pdfViewport;width. page:render({ canvasContext, context: viewport; pdfViewport }); } })(): initPDFViewer("https.//blog.mozilla.org/security/files/2015/05/HTTPS-FAQ;pdf"); </script> </body> </html>
Hope this helps you:)
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.