如何解决PDFJS:在画布上渲染 PDF
我正在尝试在画布上渲染 pdf 文件。
框架是 Nuxt.js (Vue)
最后,我在画布上渲染了 pdf,但有些奇怪。已呈现放大的 pdf。
我尝试更改比例和其他值,但结果相同。
我该如何解决这个问题?
请检查我附加的图片。
这是例外的pdf。
我的结果如下:(当前比例值为1.5)
这是我渲染 pdf 的一些代码。
<script>
export default {
props: ["page","scale"],mounted() {
this.drawPage();
},beforeDestroy() {
this.destroyPage(this.page);
},methods: {
drawPage() {
if (this.renderTask) return;
const { viewport } = this;
const canvasContext = this.$el.getContext("2d");
const renderContext = { canvasContext,viewport };
this.renderTask = this.page.render(renderContext);
this.renderTask.promise.then(() => this.$emit("rendered",this.page));
this.renderTask.promise.then(/* */).catch(this.destroyRenderTask);
},destroyPage(page) {
if (!page) return;
page._destroy();
if (this.renderTask) this.renderTask.cancel();
},destroyRenderTask() {
if (!this.renderTask) return;
this.renderTask.cancel();
delete this.renderTask;
},},render(h) {
const { canvasAttrs: attrs } = this;
return h("canvas",{ attrs });
},created() {
this.viewport = this.page.getViewport({
scale: this.scale,});
},computed: {
canvasAttrs() {
let { width,height } = this.viewport;
[width,height] = [width,height].map((dim) => Math.ceil(dim));
const style = this.canvasStyle;
return {
style,class: "pdf-page",};
},canvasStyle() {
const {
width: actualSizeWidth,height: actualSizeHeight,} = this.actualSizeViewport;
const pixelRatio = window.devicePixelRatio || 1;
const [pixelWidth,pixelHeight] = [
actualSizeWidth,actualSizeHeight,].map((dim) => Math.ceil(dim / pixelRatio));
return `width: ${pixelWidth}px; height: ${pixelHeight}px;`;
},actualSizeViewport() {
return this.viewport.clone({ scale: this.scale });
},watch: {
page(page,oldPage) {
this.destroyPage(oldPage);
},};
</script>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。