Skip to content

Instantly share code, notes, and snippets.

/index.html

Created August 24, 2016 07:25
Show Gist options
  • Save anonymous/eb34be974173b71ffb0963ee452e93e7 to your computer and use it in GitHub Desktop.
Save anonymous/eb34be974173b71ffb0963ee452e93e7 to your computer and use it in GitHub Desktop.
Download ZIP
Quick howto: embed PDF/ Office documents viewers How to embed PDF and MS Office docs viewers into a web application using Google Docs viewer and Office Apps viewer // source https://jsbin.com/cojuyeg
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="How to embed PDF and MS Office docs viewers into a web application using Google Docs viewer and Office Apps viewer">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Quick howto: embed PDF/ Office documents viewers</title>
<style id="jsbin-css">
body {
background-color: #009688;
color: white;
font-family: Helvetica;
}
body .iframe {
width: 100%;
height: 600px;
display: none;
}
</style>
</head>
<body>
<h2>Testing Google Docs / Office Apps View Integration</h2>
<button class="google-viewer">Google Docs Viewer</button>
<button class="office-viewer">Office Apps Viewer</button>
<iframe class="google-docs iframe" src="https://docs.google.com/viewer?url=https://gate.ac.uk/sale/talks/text-mining-course-sslst2011/slides/module1-intro.pdf&embedded=true" frameborder="0"
scrolling="no" marginheight="0" marginwidth="0" role="document" aria-label="PDF document" title="PDF document">Click to view the document</iframe>
<iframe class = "office iframe" src="https://view.officeapps.live.com/op/embed.aspx?src=http%3A%2F%2Fstatsclass.org%2Fworkshops%2FDataScience%2FHandout8%2FHandout8.docx" frameborder="0"
scrolling="no" marginheight="0" marginwidth="0" role="document" aria-label="Doc document" title="Doc document" >
</iframe>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script id="jsbin-javascript">
$(document).ready(function(){
$('.google-viewer').on('click', function(){
$('.google-docs').slideToggle();
});
$('.office-viewer').on('click', function(){
$('.office').slideToggle();
});
});
</script>
<script id="jsbin-source-css" type="text/css">body
background-color: #009688
color: #fff
font-family: Helvetica
.iframe
width: 100%
height: 600px
display: none
</script>
<script id="jsbin-source-javascript" type="text/javascript">$(document).ready(function(){
$('.google-viewer').on('click', function(){
$('.google-docs').slideToggle();
});
$('.office-viewer').on('click', function(){
$('.office').slideToggle();
});
});</script></body>
</html>
Raw
jsbin.cojuyeg.css
body {
background-color: #009688;
color: white;
font-family: Helvetica;
}
body .iframe {
width: 100%;
height: 600px;
display: none;
}
Raw
jsbin.cojuyeg.js
$(document).ready(function(){
$('.google-viewer').on('click', function(){
$('.google-docs').slideToggle();
});
$('.office-viewer').on('click', function(){
$('.office').slideToggle();
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment