Skip to content

Instantly share code, notes, and snippets.

@jacky860226

jacky860226/pdf.html

Last active November 28, 2024 12:00
Show Gist options
  • Save jacky860226/72615ddacc31580a56fc57b5c7e4af00 to your computer and use it in GitHub Desktop.
Save jacky860226/72615ddacc31580a56fc57b5c7e4af00 to your computer and use it in GitHub Desktop.
Download ZIP
PDF.js
Raw
pdf.html
<!DOCTYPE html>
<html dir="ltr" mozdisallowselectionprint>
<head>
<meta charset="utf-8">
<title>PDF.js viewer</title>
<!-- pdf.js v2.0.332 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.332/pdf.min.js"></script>
</head>
<body tabindex="1" class="loadingInProgress">
<div id="content" style="padding-bottom: 2rem;">Loading...</div>
<script type="text/javascript">
let j_cont = document.getElementById('content');
j_cont.innerHTML = "";
var url = 'https://cdn.rawgit.com/mozilla/pdf.js/master/web/compressed.tracemonkey-pldi-09.pdf';
PDFJS.getDocument(url).then(function(pdf) {
for (var pageNum = 1; pageNum <= pdf.numPages; ++pageNum) {
pdf.getPage(pageNum).then(function(page) {
// you can now use *page* here
var canvas = document.createElement('canvas');
j_cont.appendChild(canvas);
//console.log(canvas.clientWidth,page.getViewport(1.0).width);
canvas.style.cssText = 'width:100%; margin-bottom:16px; display:block;';
var viewport = page.getViewport(1.5/(canvas.width/page.getViewport(1.0).width))//1.5/(canvas.width/page.getViewport(1.0).width)
var context = canvas.getContext('2d');
canvas.width = viewport.width;
canvas.height = viewport.height;
/*var j_div = document.createElement('div');
j_cont.appendChild(j_div);
j_div.style.cssText = 'width:'+viewport.width+'px; height:'+viewport.height+'px;'
j_div.className = 'textlayer';
j_div.offsetTop = canvas.offsetTop;
j_div.offsetLeft = canvas.offsetLeft;
console.log(j_div.offsetTop, j_div.offsetLeft);
//j_div.css('width',viewport.width)
//j_div.css('height',viewport.height)
//j_div.offset({'top':offset.top,'left':offset.left})
*/
page.getTextContent().then(function(text) {
/*var textlayer = new TextLayerBuilder({
'textLayerDiv': j_div,
'viewport':viewport,
'pageIndex':pageNum
});
textlayer.setTextContent(text);*/
page.render({
'canvasContext':context,
'viewport':viewport
})
})
});
}
})
</script>
<iframe src="http://docs.google.com/gview?url=https://cdn.rawgit.com/mozilla/pdf.js/master/web/compressed.tracemonkey-pldi-09.pdf&embedded=true" style="width:100%; height:1000px;" frameborder="0"></iframe>
<!-- <iframe src="100.html" frameborder="0" width="100%" height="700"></iframe> -->
</body>
</html>
<script>
/*
function init(){
$('#tags').keydown(function(event) {
if (event.which == 13) // return
$('#tags').focusout();
});
$('#tags').focusout(function(event) {
var tags = event.target.value;
if (tags.search(/^[a-zA-Z0-9-_, ]+$/) != -1) {
// valid
$('#tags-invalid').hide();
$.post('/oj/be/set-tags', {
'pro_id': 16,
'tags': tags,
},function() {
$('#tags-done').show();
});
} else {
// invalid
event.target.focus();
$('#tags-invalid').show();
}
});
var j_cont = $('#cont');
function _load_html(){
j_cont.load('/oj/pro/16/cont.html',function(res,status,xhr){
if(status == 'error'){
$('#pdfbtn').show();
_load_pdf();
}else{
MathJax.Hub.Queue(["Typeset",MathJax.Hub,j_cont[0]]);
j_cont.find('pre > code').each(function(i,e){
$(e).addClass('html');
hljs.highlightBlock(e);
});
}
});
}
function _load_pdf(){
PDFJS.getDocument('/oj/pro/16/cont.pdf').then(function(pdf){
var i;
j_cont.empty();
for(i = 0;i < pdf.numPages;i++){
pdf.getPage(i + 1).then(function(idx){return function(page){
var j_canvas = $('<canvas style="width:100%; margin-bottom:16px; display:block;"></canvas>');;
var j_div = $('<div></div>');
var ctx = j_canvas[0].getContext('2d');
var offset;
var viewport;
j_cont.append(j_canvas);
offset = j_canvas.offset();
viewport = page.getViewport(
j_canvas.width() / page.getViewport(1.0).width);
j_canvas.attr('width',viewport.width);
j_canvas.attr('height',viewport.height);
j_div.addClass('textlayer');
j_div.css('width',viewport.width);
j_div.css('height',viewport.height);
j_div.offset({'top':offset.top,'left':offset.left});
j_cont.append(j_div);
page.getTextContent().then(function(text){
var textlayer = new TextLayerBuilder({
'textLayerDiv': j_div[0],
'viewport':viewport,
'pageIndex':idx
});
textlayer.setTextContent(text);
page.render({
'canvasContext':ctx,
'viewport':viewport,
'textLayer':textlayer
});
});
};}(i + 1));
}
});
}
_load_html();
}
function load_pdf(url) {
let j_cont = $('#content');
j_cont.empty()
PDFJS.workerSrc = ' https://npmcdn.com/pdfjs-dist/build/pdf.worker.min.js'
PDFJS.getDocument(url).then(function(pdf) {
for(let i = 0; i < pdf.numPages; i++) {
pdf.getPage(i + 1).then(function(idx) { return function(page) {
let j_canvas = $('<canvas style="width:100%; margin-bottom:16px; display:block;"></canvas>')
let j_div = $('<div></div>')
let ctx = j_canvas[0].getContext('2d')
let offset
let viewport
j_cont.append(j_canvas)
offset = j_canvas.offset()
viewport = page.getViewport(j_canvas.width() / page.getViewport(1.0).width)
j_canvas.attr('width',viewport.width)
j_canvas.attr('height',viewport.height)
j_div.addClass('textlayer')
j_div.css('width',viewport.width)
j_div.css('height',viewport.height)
j_div.offset({'top':offset.top,'left':offset.left})
j_cont.append(j_div)
page.getTextContent().then(function(text) {
page.render({
'canvasContext':ctx,
'viewport':viewport
})
})
}}(i + 1));
}
})
}
window.iFrameResizer = {
messageCallback: function(data) {
let problem_uid = data.problem_uid
let revision = data.revision
let problem_url = '/api/problem/' + problem_uid + '/static/'
function loadContent() {
if (this.status === 404) {
load_pdf(problem_url + 'cont.pdf?rev=' + revision)
} else {
let e_content = document.getElementById('content')
// XXX: use DOM operation instead (for BASE element in the inner document)
e_content.innerHTML = '<base href=' + problem_url + '>\n' + this.responseText
MathJax.Hub.Queue(["Typeset", MathJax.Hub, e_content]);
}
}
let req = new XMLHttpRequest()
req.onload = loadContent
req.open('get', problem_url + 'cont.html?rev=' + revision)
req.send()
}
}*/
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment