使用mozilla中的pdfjs库在svelte应用程序中显示pdf文件

Question

我有一个Showpdf.svelte组件，如下代码所示。如果在组件的App.svelte中调用并执行此代码，则pdf文件不会显示在浏览器中，而是下载。我想使用sveltejs应用程序在浏览器中显示一个pdf文件。如果有人帮我解决这个问题，我将不胜感激。

<script>
pdfjsLib
.getDocument("https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf")
.then((doc) => {
console.log(doc._pdfInfo.numPages);
doc.getPages(1).then((page) => {
let myCanvas = document.getElementById("my_canvas");
let context = myCanvas.getContetxt("2d");
let viewport = page.getViewport(1);
myCanvas.width = viewport.width;
myCanvas.height = viewport.height;
page.render({
canvasContext: context,
viewport: viewport,
});
});
});
</script>
<style>
</style>
<canvas id="my_canvas" />

Answer 1

您可以使用bind:this指令获得对画布的引用，并使用该指令在中呈现PDF，如文档的示例部分所述。

示例

<svelte:head>
<script src="//mozilla.github.io/pdf.js/build/pdf.js"></script>
</svelte:head>
<script>
let canvasRef;

const data = atob(
'JVBERi0xLjcKCjEgMCBvYmogICUgZW50cnkgcG9pbnQKPDwKICAvVHlwZSAvQ2F0YWxvZwog' +
'IC9QYWdlcyAyIDAgUgo+PgplbmRvYmoKCjIgMCBvYmoKPDwKICAvVHlwZSAvUGFnZXMKICAv' +
'TWVkaWFCb3ggWyAwIDAgMjAwIDIwMCBdCiAgL0NvdW50IDEKICAvS2lkcyBbIDMgMCBSIF0K' +
'Pj4KZW5kb2JqCgozIDAgb2JqCjw8CiAgL1R5cGUgL1BhZ2UKICAvUGFyZW50IDIgMCBSCiAg' +
'L1Jlc291cmNlcyA8PAogICAgL0ZvbnQgPDwKICAgICAgL0YxIDQgMCBSIAogICAgPj4KICA+' +
'PgogIC9Db250ZW50cyA1IDAgUgo+PgplbmRvYmoKCjQgMCBvYmoKPDwKICAvVHlwZSAvRm9u' +
'dAogIC9TdWJ0eXBlIC9UeXBlMQogIC9CYXNlRm9udCAvVGltZXMtUm9tYW4KPj4KZW5kb2Jq' +
'Cgo1IDAgb2JqICAlIHBhZ2UgY29udGVudAo8PAogIC9MZW5ndGggNDQKPj4Kc3RyZWFtCkJU' +
'CjcwIDUwIFRECi9GMSAxMiBUZgooSGVsbG8sIHdvcmxkISkgVGoKRVQKZW5kc3RyZWFtCmVu' +
'ZG9iagoKeHJlZgowIDYKMDAwMDAwMDAwMCA2NTUzNSBmIAowMDAwMDAwMDEwIDAwMDAwIG4g' +
'CjAwMDAwMDAwNzkgMDAwMDAgbiAKMDAwMDAwMDE3MyAwMDAwMCBuIAowMDAwMDAwMzAxIDAw' +
'MDAwIG4gCjAwMDAwMDAzODAgMDAwMDAgbiAKdHJhaWxlcgo8PAogIC9TaXplIDYKICAvUm9v' +
'dCAxIDAgUgo+PgpzdGFydHhyZWYKNDkyCiUlRU9G'
);

// Loaded via <script> tag, create shortcut to access PDF.js exports.
const pdfjsLib = window['pdfjs-dist/build/pdf'];

// The workerSrc property shall be specified.
pdfjsLib.GlobalWorkerOptions.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';

pdfjsLib
.getDocument({ data }).promise
.then(doc => doc.getPage(1))
.then(page => {
const scale = 1.5;
const viewport = page.getViewport({ scale });
// Prepare canvas using PDF page dimensions
var context = canvasRef.getContext('2d');
canvasRef.height = viewport.height;
canvasRef.width = viewport.width;
// Render PDF page into canvas context
var renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext);
});
</script>
<canvas bind:this={canvasRef} />