[英]How to import Mozilla PDF.js in Vue project?
The question is simple.问题很简单。 How do I correctly import the PDF.js library into a Vuejs project?
如何将 PDF.js 库正确导入 Vuejs 项目?
The library is undefined
when I log it.当我记录它时,该库是
undefined
的。
See my problem in a codesandbox live here . 在此处的代码盒中查看我的问题。
This is how I am trying it now:这就是我现在尝试的方式:
<script>
import pdfjsLib from "pdfjs-dist/build/pdf";
// import { PDFViewer } from "pdfjs-dist/web/pdf_viewer";
import "pdfjs-dist/web/pdf_viewer.css";
pdfjsLib.GlobalWorkerOptions.workerSrc =
"https://cdn.jsdelivr.net/npm/pdfjs-dist@2.0.943/build/pdf.worker.min.js";
export default {
name: "PdfViewer",
mounted() {
pdfjsLib.getDocument("./sample.pdf").then((doc) => {
console.log("doc: ", doc);
});
},
methods: {},
};
</script>
But that gives me the following error: Cannot read property 'GlobalWorkerOptions' of undefined
但这给了我以下错误:
Cannot read property 'GlobalWorkerOptions' of undefined
I think the error occurs if pdfjsLib does not fall into the global scope, see also codesandbox :我认为如果 pdfjsLib 不属于全局 scope,则会发生错误,另请参见代码框:
<template>
<div id="pageContainer">
<div id="viewer" class="pdfViewer"></div>
</div>
</template>
<script>
import pdfjsLib from "pdfjs-dist/build/pdf";
import { PDFViewer } from "pdfjs-dist/web/pdf_viewer";
import "pdfjs-dist/web/pdf_viewer.css";
pdfjsLib.GlobalWorkerOptions.workerSrc =
"https://cdn.jsdelivr.net/npm/pdfjs-dist@2.0.943/build/pdf.worker.min.js";
export default {
name: "PdfViewer",
props: { docPath: String },
mounted() {
this.getPdf();
},
methods: {
async getPdf() {
let container = document.getElementById("pageContainer");
let pdfViewer = new PDFViewer({
container: container,
});
let pdf = await pdfjsLib.getDocument(this.docPath);
pdfViewer.setDocument(pdf);
},
},
};
</script>
<style>
#pageContainer {
margin: auto;
width: 80%;
}
div.page {
display: inline-block;
}
</style>
use it:用它:
<PdfViewer docPath="./sample.pdf" />
Pdf.js
provide a solution for us. Pdf.js
为我们提供了解决方案。 Webpack.js included in the project. Webpack.js包含在项目中。
const pdfjsLib = require("pdfjs-dist/webpack");
If you get an error like below:如果您收到如下错误:
./node_modules/pdfjs-dist/build/pdf.min.js 22:36927
Module parse failed: Unexpected token (22:36927)
Then we have to use es5/build/pdf.js
, so we can create src/pdfjs-webpack.js
:然后我们必须使用
es5/build/pdf.js
,所以我们可以创建src/pdfjs-webpack.js
:
"use strict";
var pdfjs = require("pdfjs-dist/
es5/build/pdf.min.js");
var PdfjsWorker = require("worker-loader?esModule=false&filename=[name].js!pdfjs-dist/
es5/build/pdf.worker.min.js");
if (typeof window !== "undefined" && "Worker" in window) {
pdfjs.GlobalWorkerOptions.workerPort = new PdfjsWorker();
}
module.exports = pdfjs;
then:然后:
const pdfjsLib = require("../pdfjs-webpack");
In case anyone else needs it, the soution is really simple.如果其他人需要它,解决方案非常简单。 You just have to import it like this:
你只需要像这样导入它:
import * as pdfjsLib from "pdfjs-dist/build/pdf";
vue-cli5
already use webpack5
, and webpack5
has a built-in web worker
and is very easy to use. vue-cli5
已经使用webpack5
,并且webpack5
内置了web worker
,非常好用。
Create a file: pdfjs-webpack5.js
创建文件:
pdfjs-webpack5.js
import * as pdfjsLib from 'pdfjs-dist'
pdfjsLib.GlobalWorkerOptions.workerPort = new Worker(new URL('pdfjs-dist/build/pdf.worker.js', import.meta.url))
export default pdfjsLib
According to the example getinfo.js
given in Setup PDF.js in a website
, you can easily read the contents of PDF files.根据
Setup PDF.js in a website
getinfo.js
的getinfo.js示例,可以轻松读取PDF文件的内容。
I use the version of the package.我使用的是 package 的版本。
pdfjs-dist: 2.15.349
webpack: 5.74.0
@vue/cli*: 5.0.8
@NKSM @NKSM
use: var pdfjs = require('pdfjs-dist/es5/build/pdf.min.js');
使用:
var pdfjs = require('pdfjs-dist/es5/build/pdf.min.js');
but error但错误
* pdfjs-dist/es5/build/pdf.min.js in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/pages/utils/preview/Index.vue?vue&type=script&lang=js&
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.