PDF를 HTML에 삽입하는 권장 방법
PDF를 HTML에 삽입하는 권장 방법은 무엇입니까?
- iFrame?
- 오브젝트?
- 내장?
Adobe는 이에 대해 뭐라고 말합니까?
제 경우 PDF는 즉시 생성되므로 플래시하기 전에 타사 솔루션에 업로드할 수 없습니다.
이는 빠르고 간단하며 서드파티 스크립트가 필요하지 않습니다.
<embed src="http://example.com/the.pdf" width="500" height="375"
type="application/pdf">
업데이트 (2021년 2월 3일)
Adobe의 PDF Embed API입니다.
(Adobe)를 .js ) "ID"
https://www.adobe.io/apis/documentcloud/dcsdk/pdf-embed.html
갱신(2018년 1월):
Android의 Chrome 브라우저는 PDF 임베디드를 더 이상 지원하지 않습니다.Google Drive PDF 뷰어를 사용하면 이 문제를 해결할 수 있습니다.
<embed src="https://drive.google.com/viewerng/
viewer?embedded=true&url=http://example.com/the.pdf" width="500" height="375">
아마 가장 좋은 방법은 PDF를 사용하는 것입니다.JS 라이브러리서드파티 플러그인이 없는 PDF 문서용 순수 HTML5/JavaScript 렌더러입니다.
온라인 데모: https://mozilla.github.io/pdf.js/web/viewer.html
GitHub: https://github.com/mozilla/pdf.js
Google PDF 뷰어를 이 용도로 사용할 수도 있습니다.구글의 공식 기능은 아니지만(제가 틀렸나요?) 매우 부드럽고 원활하게 작동합니다.PDF를 업로드하기 전에 URL을 사용해야 합니다.
<iframe src="https://docs.google.com/gview?url=http://example.com/mypdf.pdf&embedded=true" style="width:718px; height:700px;" frameborder="0"></iframe>
중요한 것은 플래시 플레이어가 필요하지 않다는 것입니다. 자바스크립트를 사용합니다.
쿼리 문자열의 일부 옵션을 전달하여 PDF가 브라우저에 표시되는 방식을 제어할 수 있습니다.IE8에서는 동작하지 않는다는 것을 깨닫기 전까지, 저는 이 작업에 만족했습니다. : (
Chrome 9 및 Firefox 3.6에서는 작동하지만 IE8에서는 "Insert your error message here, if the PDF cannot be displayed"라는 메시지가 표시됩니다.
위 브라우저의 이전 버전은 아직 테스트하지 않았습니다.하지만 내가 가지고 있는 암호는 누구에게도 도움이 될지 몰라그러면 확대/축소가 85%로 설정되고 스크롤바, 툴바 및 탐색 창이 제거됩니다.IE에서도 동작하는 것이 발견되면, 투고를 갱신합니다.
<object width="400" height="500" type="application/pdf" data="/my_pdf.pdf?#zoom=85&scrollbar=0&toolbar=0&navpanes=0">
<p>Insert your error message here, if the PDF cannot be displayed.</p>
</object>
다 <object> ★★★★★★★★★★★★★★★★★」<embed>는 폭넓은 브라우저 호환성을 제공합니다.
<object data="http://yoursite.com/the.pdf" type="application/pdf" width="750px" height="750px">
<embed src="http://yoursite.com/the.pdf" type="application/pdf">
<p>This browser does not support PDFs. Please download the PDF to view it: <a href="http://yoursite.com/the.pdf">Download PDF</a>.</p>
</embed>
</object>
이 코드를 참조해 주세요.HTML에 PDF를 삽입하려면
<!-- Embed PDF File -->
<object src="YourFile.pdf" type="application/pdf" title="SamplePdf" width="500" height="720">
<a href="YourFile.pdf">shree</a>
</object>
Image Magick을 통해 PNG로 변환하여 PNG를 표시합니다(빠르고 더러움).
<?php
$dir = '/absolute/path/to/my/directory/';
$name = 'myPDF.pdf';
exec("/bin/convert $dir$name $dir$name.png");
print '<img src="$dir$name.png" />';
?>
이 옵션은 빠른 해결 방법이 필요하고 브라우저 간 PDF 보기 문제를 방지하고 PDF가 1~2페이지에 불과한 경우에 적합합니다.물론 웹 서버에 ImageMagick을 설치해야 합니다(이것에 Ghostscript가 필요합니다).이 옵션은 공유 호스팅 환경에서는 사용할 수 없습니다.이와 같이 동작하는 PHP 플러그인(imagick이라고 함)도 있습니다만, 그것만의 특별한 요건이 있습니다.
저장된 pdf의 상대 위치를 다음과 같이 사용할 수 있습니다.
예 1
<embed src="example.pdf" width="1000" height="800" frameborder="0" allowfullscreen>
예2
<iframe src="example.pdf" style="width:1000px; height:800px;" frameborder="0" allowfullscreen></iframe>
문제는 법적인 이유로 일시적으로 PDF를 하드디스크에 저장할 수 없다는 것입니다.또한 PDF를 브라우저에 미리보기로 표시할 때 페이지 전체를 새로고침하지 마십시오.
먼저 PDF.jS를 시도했습니다.파이어폭스와 크롬용 뷰어의 Base64와 연동됩니다.다만, PDF의 경우, 너무 느렸습니다.IE/Edge는 전혀 동작하지 않았습니다.
그래서 HTML 오브젝트 태그에 Base64 스트링을 사용하여 시도했습니다.이것도 IE/Edge에서는 동작하지 않았습니다(PDF.js와 같은 문제일 수 있습니다).Chrome/Firefox/Safari에서도 문제 없습니다.그래서 하이브리드 솔루션을 선택했습니다.엣지에서는 IFrame을 사용하고 다른 모든 브라우저에서는 객체 태그를 사용합니다.
IFrame 솔루션은 물론 Chrome 및 Co.에서도 사용할 수 있습니다.이 솔루션을 Chrome에 사용하지 않은 이유는 PDF가 올바르게 표시되지만 미리보기에서 "다운로드"를 클릭하면 Chrome이 서버에 새로운 요청을 하기 때문입니다.PDF가 IFrame에 표시되므로 필요한 숨김 필드 pdfHelperTransferData(PDF 생성에 필요한 폼 데이터 전송용)가 더 이상 설정되지 않습니다.이 기능/버그에 대해서는 PDF를 다운로드할 때 Chrome에서 두 가지 요청을 전송하고 그 중 하나를 취소합니다.
이것으로, IE9 및 IE10의 문제는 해소되지 않습니다.이 경우 미리보기 솔루션을 포기하고 미리보기 대신 미리보기 버튼을 클릭하여 문서를 사용자에게 다운로드합니다.우리는 많은 노력을 했지만 해결책을 찾았다고 해도, 이 작은 부분의 사용자에게는 더 많은 노력이 필요하지 않았을 것입니다.다운로드에 관한 델의 솔루션은, 이쪽에서 보실 수 있습니다.IFrame을 사용하여 갱신하지 않고 PDF를 다운로드해 주세요.
Javascript:
var transferData = getFormAsJson()
if (isMicrosoftBrowser()) {
// Case IE / Edge (because doesn't recoginzie Pdf-Base64 use Iframe)
var form = document.getElementById('pdf-helper-form');
$("#pdfHelperTransferData").val(transferData);
form.target = "iframe-pdf-shower";
form.action = "serverSideFunctonWhichWritesPdfinResponse";
form.submit();
} else {
// Case non IE use Object tag instead of iframe
$.ajax({
url: "serverSideFunctonWhichRetrivesPdfAsBase64",
type: "post",
data: { downloadHelperTransferData: transferData },
success: function (result) {
$("#object-pdf-shower").attr("data", result);
}
})
}
델의 HTML:
<div id="pdf-helper-hidden-container" style="display:none">
<form id="pdf-helper-form" method="post">
<input type="hidden" name="pdfHelperTransferData" id="pdfHelperTransferData" />
</form>
</div>
<div id="pdf-wrapper" class="modal-content">
<iframe id="iframe-pdf-shower" name="iframe-pdf-shower"></iframe>
<object id="object-pdf-shower" type="application/pdf"></object>
</div>
브라우저의 IE/Edge 타입을 확인하려면 , 여기를 참조해 주세요.JavaScript를 사용하여 Internet Explorer(IE) 및 Microsoft Edge를 검출하려면 어떻게 해야 합니까?나는 이 연구 결과가 다른 사람의 시간을 절약해 주길 바란다.
FDView는 PDF2SWF(그 자체가 xpdf 기반)와 SWF 뷰어를 조합하여 PDF 문서를 서버상에서 즉시 변환 및 삽입할 수 있습니다.
xpdf는 완벽한 PDF 변환기가 아닙니다.더 나은 결과가 필요한 경우 Ghostview를 통해 PDF 문서를 Flash View를 보다 쉽게 구축할 수 있는 다른 형식으로 변환할 수 있습니다.
그러나 간단한 PDF 문서라면 FDView가 상당히 잘 작동해야 합니다.
PDF를 저장할 컨테이너를 만듭니다.
<div id="example1"></div>PDFObject에 삽입할 PDF와 삽입할 위치를 지시합니다.
<script src="/js/pdfobject.js"></script> <script>PDFObject.embed("/pdf/sample-3pp.pdf", "#example1");</script>필요에 따라 CSS를 사용하여 치수, 테두리, 여백 등의 시각적 스타일을 지정할 수 있습니다.
<style> .pdfobject-container { height: 500px;} .pdfobject { border: 1px solid #666; } </style>
출처 : https://pdfobject.com/
Scribd는 더 이상 서버에서 문서를 호스트할 필요가 없습니다.계정을 생성하여 퍼블리셔 ID를 얻으면 됩니다.자신의 서버에 저장된 PDF 파일을 로드하는 데 필요한 JavaScript 코드 몇 줄만 있으면 됩니다.
AX는 이렇게 했어요.IOS 및 Vue.js:
axios({
url: `urltoPDFfile.pdf`,
method: 'GET',
headers: headers,
responseType: 'blob'
})
.then((response) => {
this.urlPdf = URL.createObjectURL(response.data)
})
.catch((error) => {
console.log('ERROR ', error)
})
HTML에 urlPDF를 동적으로 추가합니다.
<object width='100%' height='600px' :data='urlPdf' type='application/pdf'></object>
업데이트 - Adobe PDF Embed API
Adobe는 Adobe PDF Embed API를 완전히 무료로 출시했습니다.PDF 형식 자체를 작성했기 때문에 API가 가장 적합할 것입니다.
- 최고 품질의 PDF 렌더링을 제공합니다.
- 유저 익스피리언스를 완전하게 커스터마이즈 해, PDF 의 표시 방법을 선택할 수 있습니다.
- 또, PDF 의 사용 상황도 분석하기 때문에, 유저가 PDF 와의 상호작용(페이지나 검색에 소비하는 시간등)을 이해할 수 있습니다.
'만들면 된다', '만들면 된다', '만들면 ' 이렇게 됩니다.api_key코드 스니펫에 사용합니다.
에 의한 PDF ★★★★★★★★file_url
은 HTML에 할 수 입니다.HTML 를 PDF 、 API html html html 。file_url을.{ location: { url: "url_of_the_pdf" } }설정을 실시합니다.
<div id="adobe-dc-view"></div>
<script src="https://documentcloud.adobe.com/view-sdk/main.js"></script>
<script type="text/javascript">
document.addEventListener("adobe_dc_view_sdk.ready", function(){
var adobeDCView = new AdobeDC.View({clientId: "api_key", divId: "adobe-dc-view"});
adobeDCView.previewFile({
content: { location: { url: "url_of_the_pdf" } },
metaData: { fileName: "file_name_to_display" }
}, {});
});
</script>
PDF를 버퍼로 표시
다음은 HTML에 추가하고 버퍼(로컬 파일 등)가 있는 경우 API를 이용하여 PDF를 표시할 수 있는 코드 스니펫의 예입니다. 하다, 하다, 하다, 하다를 넣어야 할것 같아요.{ promise: <FILE_PROMISE> }설정을 실시합니다.
<div id="adobe-dc-view"></div>
<script src="https://documentcloud.adobe.com/view-sdk/main.js"></script>
<script type="text/javascript">
document.addEventListener("adobe_dc_view_sdk.ready", function(){
var adobeDCView = new AdobeDC.View({clientId: "api_key", divId: "adobe-dc-view"});
adobeDCView.previewFile({
content: { promise: <FILE_PROMISE> }
metaData: { fileName: "file_name_to_display" }
}, {});
});
</script>
ImageMagick을 사용한PdfToImageServletconvert명령어를 입력합니다.
예: " " " :<img src='/webAppDirectory/PdfToImageServlet?pdfFile=/usr/share/cups/data/default-testpage.pdf'>
<object width="400" height="400" data="helloworld.pdf"></object>
리액트로 PDF를 미리 봐야 했기 때문에 여러 라이브러리를 시도한 후 최적의 해결책은 데이터를 가져와 eb로 만드는 것이었습니다.
const pdfBase64 = //fetched from url or generated with jspdf or other library
<embed
src={pdfBase64}
width="500"
height="375"
type="application/pdf"
></embed>
파일을 브라우저로 스트리밍하려면 스택 오버플로 질문 PDF 파일을 바이너리로 브라우저로 스트리밍하는 방법를 참조하십시오.NET 2.0 - 파일 시스템에서 파일을 제공하는 경우에도 동적으로 생성되는 경우에도 약간의 차이가 있지만 이 기능은 작동합니다.
이와 같이, 참조되고 있는 MSDN 기사는, 보다 심플한 세계관을 가지고 있기 때문에, HTTPS 를 개입시켜 PDF 를 브라우저에 정상적으로 스트리밍 해 주세요.또, 제공해야 할 헤더도 몇개인가 읽어보실 수 있습니다.
iframe을 사용하다의 웹 을 iframe과 함께 합니다.src속성을 첫 번째 형식으로 설정합니다.
고려해야 할 옵션 중 하나는 주의 PDF입니다.
pdfspdfs에서을 할 이 없는 한 .
내용을 iframehtml을 사용합니다.
<iframe width='1000' height='800' src='http://bit.ly/1JxrtjR' frameborder='0' allowfullscreen></iframe>
- 입력 PDF 바이트의 blob을 생성합니다.
- 이 크로스 브라우저 회피책으로 패치된 iframe 및 PDF.js 사용
iframe의 URI는 다음과 같습니다.
/viewer.html?file=blob:19B579EA-5217-41C6-96E4-5D8DF5A5C70B
이제 FF, Chrome, IE 11 및 Edge 모두 URL의 표준 blob URI를 통해 전달된 iframe 뷰어에 PDF를 표시합니다.
pdf를 삽입하는 가장 좋은 방법은 부트스트랩을 사용하는 것입니다.그것은 pdf를 표시할 뿐만 아니라 빈 공간을 채울 수 있을 뿐만 아니라 원하는 대로 비율을 지정할 수 있기 때문입니다.다음은 제가 만든 제품의 예입니다.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<div class="embed-responsive embed-responsive-1by1">
<iframe class="embed-responsive-item" src="http://example.com/the.pdf" type="application/pdf" allowfullscreen></iframe>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>URI 제한으로 인해 PDF로 인코딩된 base64에 문제가 생기기 전에 2MB 이상의 파일은 Chrome에서 제대로 렌더링되지 않습니다.
솔루션은 다음과 같습니다.
Blob에 임시 DOM 문자열 베이스를 생성합니다.
const blob = dataURItoBlob(this.dataUrl);var temp_url = window.URL.createObjectURL(blob);iframe을 DOM 에 부가할 장소를 결정합니다.
const target = document.querySelector(targetID);target.innerHTML = `<iframe src='${temp_url}' type="application/pdf"></iframe>
<embed src="data:application/pdf;base64,..."/>
저는 이미 다른 곳에서 이 질문에 답했지만, 저는 여러 솔루션 사이에서 평가를 했습니다.또, 상업적인 사용을 계획하고 있는 경우는, 다음과 같은 것이 도움이 됩니다.
무료 솔루션
- iframe: iframe을 사용합니다만, 이것은 대부분의 사람들이 여기서 검색하는 것이 아닙니다.
- [Google Docs Preview] Google 문서에는 미리 보기가 있습니다(다른 답변은 이쪽 참조).
- Pdf.js는 외부 의존 관계가 없는 오픈 소스 솔루션입니다.
- Adobe는 클라우드 기반 솔루션에 문제가 없는 경우 '무료' PDF Embed API를 제공합니다.
커머셜 프로바이더
- Pdf.js Express는 Pdf.js(최악의 퍼포먼스, 저렴한 제품)로 확장되어 상용화되었습니다.
- PSPDFKit - 오스트리아에서 온 프로바이더(적당한 가격, 우수한 제품)
- Foxit - PDF 웹 솔루션도 제공하는 중국 기업.(커머셜 오퍼 제외)
- PDFTron - PSDPDFkit에 대한 미국 내 경쟁사(가격은 비싸지만 고급)
이게 도움이 됐으면 좋겠다.만약 이것이 사람들에게 도움이 된다면 블로그 포스트에 더 자세한 정보를 게시할 수도 있습니다(댓글을 통해 알려 주십시오).
가능하면 네이티브 솔루션을 선택해주세요.브라우저에서 네이티브로 제공되기 때문에 항상 최적의 솔루션입니다(사용).embed또는iframe) 또는 https://pdfobject.com 에서 작은 lib 를 사용하여 지원을 받을 수 있습니다.
대부분의 사람들은 PDF를 사용할 것을 권장합니다.유명한 JS.Shadow DOM을 사용할 때까지 정상적으로 동작하고 있습니다.공백(흰색)으로 되어 있는 페이지도 있고, 이유 없이 검은색으로 되어 있는 페이지도 있습니다.무슨 일이 일어나고 있는지 아는 것은 불가능하며, 현재 생산 중입니다. :)
PDF 호스팅을 원하지 않는 경우.JS는 DocDroid를 직접 사용해 볼 수 있습니다.Google Drive PDF 뷰어와 유사하지만 사용자 지정 브랜딩이 가능합니다.
PDF에 iFrame을 사용하면 됩니다.
React.js 앱에 특정 니즈가 있어 수백만 가지 솔루션을 시도했지만 iFrame:) 행운을 빕니다!
PDF 파일을 직접 호스트하지 않거나 사용자가 PDF 파일을 다운로드하지 못하도록 하는 등의 추가 보안 기능을 사용하여 PDF 뷰어를 커스터마이즈하고 싶은 경우.Cloud PDF 사용을 권장합니다.https://cloudpdf.io
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CloudPDF Viewer</title>
<style>
body, html {
height: 100%;
margin: 0px;
}
</style>
</head>
<body style="height: 100%">
<div id="viewer" style="width: 800px; height: 500px; margin: 80px auto;"></div>
<script type="text/javascript" src="https://cloudpdf.io/viewer.min.js?version=0.1.0-beta.11"></script>
<script>
document.addEventListener('DOMContentLoaded', function(){
const config = {
documentId: 'eee2079d-b0b6-4267-9812-b6b9eadb9c60',
darkMode: true,
};
CloudPDF(config, document.getElementById('viewer')).then((instance) => {
});
});
</script>
</body>
</html>
현대의 "풀페이지 스크린샷" 서비스 또는 스크립트는 HTML 및 PDF 페이지의 긴 스크린샷을 생성하여 JPG 또는 PNG 파일로 변환하여 img 요소로 포함할 수 있습니다.
이것은 정상적으로 동작하고 있으며 브라우저는 파이어폭스로 대응하고 있습니다.IE를 확인하지 않았습니다...
<script>window.location='url'</script>
언급URL : https://stackoverflow.com/questions/291813/recommended-way-to-embed-pdf-in-html
'programing' 카테고리의 다른 글
| 문자열의 UPDATE 및 REPLACE 부분 (0) | 2023.04.08 |
|---|---|
| .vimrc 파일에 gvim 글꼴 설정 (0) | 2023.04.08 |
| 더 나은 Windows 콘솔 창은 없습니까? (0) | 2023.04.08 |
| PowerShell의 Invoke-RestMethod는 curl -u(기본인증)에 상당합니다. (0) | 2023.04.08 |
| Windows에서 /usr/local/ssl/openssl.cnf에서 구성 정보를 로드할 수 없습니다. (0) | 2023.04.08 |