You’re offline. This is a read only version of the page.
Hello everyone,
I have an issue that I hope someone can help with!
I would really like to be able to display a PDF file on my Power Pages. So far, I have uploaded my PDF as a Webfile under Power Pages Management.
Then, I have tried to find a code for pdf.js and define this code, but without success. I have copied the link from this webfile and inserted it into the code.
Can anyone help me with how to get my PDF displayed?
The simplest way to display a pdf is embed in HTML. Use the webfile path or any full url (just make sure CORS is configured).
Share
Report
48
All responses (
Answers (<embed src="/PowerPlatform.pdf" width="100%" height="1000px" type="application/pdf">
You can do similar with Adobe Webforms (fillable PDFs) using simple embed codes.
If you are looking to use PDF.js you just need to import it, then call it. You can test in console in dev tools extension to see how it reacts, put the canvas on the page somewhere:
<canvas id="the-canvas"></canvas>
Then Import in console: import('//mozilla.github.io/pdf.js/build/pdf.mjs') you would put the below in the head of your site if actually publishing:
<script src="//mozilla.github.io/pdf.js/build/pdf.mjs" type="module"></script>
Then run script by either publishing or running from devtools:
// If absolute URL from the remote server is provided, configure the CORS
// header on that server.
var url = '/PowerPlatform.pdf';
// Loaded via <script> tag, create shortcut to access PDF.js exports.
var { pdfjsLib } = globalThis;
// The workerSrc property shall be specified.
pdfjsLib.GlobalWorkerOptions.workersrc='//mozilla.github.io/pdf.js/build/pdf.worker.mjs';
// Asynchronous download of PDF
var loadingTask = pdfjsLib.getDocument(url);
loadingTask.promise.then(function(pdf) {
console.log('PDF loaded');
// Fetch the first page
var pageNumber = 1;
pdf.getPage(pageNumber).then(function(page) {
console.log('Page loaded');
var scale = 1.5;
var viewport = page.getViewport({scale: scale});
// Prepare canvas using PDF page dimensions
var canvas = document.getElementById('the-canvas');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
// Render PDF page into canvas context
var renderContext = {
canvasContext: context,
viewport: viewport
};
var renderTask = page.render(renderContext);
renderTask.promise.then(function () {
console.log('Page rendered');
});
});
}, function (reason) {
// PDF loading error
console.error(reason);
});
