Hi guys,
So I need to show some PDF presentation on one of the pages but how should i do it?
I tried to use some plugins but i can`t remove Download / Print / Search topbar /Right Toggle etc.
Hi guys,
So I need to show some PDF presentation on one of the pages but how should i do it?
I tried to use some plugins but i can`t remove Download / Print / Search topbar /Right Toggle etc.
My method is to drop the code below into an HTML element.
This uses Adobe’s own JS framework. I use this because I normally need to get the total number of pages and the reader’s current page which this approach handles quite easily.
There are quite a few ways to customise the below - documentation is here - including, I think, all the things you mention in your post.
You need to change three things in the below for it to work:
You need to create credentials for the Embed PDF API at Adobe here
You need to add the URL to your PDF. You will want to do this dynamically via a Bubble expression.
As above but for the name of your PDF.
<body style="margin: 0px">
<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: "***YOU CREATE THIS AT https://console.adobe.io***", divId: "adobe-dc-view"});
var previewFilePromise = adobeDCView.previewFile({
content: {location: {url: "***PUT THE URL OF YOUR PDF IN HERE***"}},
metaData: {fileName: "***PUT THE NAME OF YOUR FILE IN HERE***"}
},{showAnnotationTools: false, showLeftHandPanel: false, showPageControls: false}
);
previewFilePromise.then(adobeViewer => {
adobeViewer.getAPIs().then(apis => {
apis.getPDFMetadata()
.then(result => console.log(result.numPages))
.catch(error => console.log(error));
apis.getCurrentPage()
.then(result => console.log(result))
.catch(error => console.log(error));
// All viewer APIs can be invoked here
});
});
const eventOptions = {
//Pass the events to receive.
//If no event is passed in listenOn, then all file preview events will be received.
listenOn: [AdobeDC.View.Enum.FilePreviewEvents.PAGES_IN_VIEW_CHANGE],
enableFilePreviewEvents: true
}
adobeDCView.registerCallback(
AdobeDC.View.Enum.CallbackType.EVENT_LISTENER,
function(event) {
}, eventOptions
);
});
</script>
</body>
</html>
Hi @academy ,
Did you tried PDF Viewer bubble plugin?
and another one,
Demo link : Your Bubble app
Demo link : https://testnew111.bubbleapps.io/version-test/pdfview
I need free option
This one is free plugin
This topic was automatically closed after 70 days. New replies are no longer allowed.