根据Mozilla的pdfjs插件,我可以通过将查询参数传递给viewer.html来查看我的pdf,如下所示:
http://localhost/MyProject/viewer.html/?file=file.pdf
这工作正常.但我有一些不同的要求.我的项目中的要求是我需要在单个页面上使用功能选项卡.每个选项卡都包含一个pdf文件.
所以,我正在考虑将所有代码都放在viewer.js一个大功能中.这样我就可以用它作为构造函数来渲染每个pdf文件.像这样的东西:
var firstPdf = new paintPdf({file: 'myfile.pdf'});
无论如何,当我能够在我的项目中成功集成pdfjs的查看器功能时,我决定稍后进行上述更改.
我的项目总结:
templates为此,首先,我将body标签中的所有html复制viewer.html并作为新属性附加到templates对象.然后我将所有必要和依赖文件从示例复制到我的项目文件夹并动态加载它们.我包含的文件是:
加载文件后,我正在使用渲染viewer.html模板lodash.不过,我无法在项目中看到渲染的pdf.我怀疑这可能是因为一切都在动态发生.(但我不确定,因为一切都按顺序呈现,因为它应该是)
顺便说一下,我添加了名称compressed.tracemonkey-pldi-09.pdf与index.html文件相邻的默认pdf .我能错过什么？
Firefox和Chrome不会抛出任何错误.
注意:我可能做错了.建议我在正确的方向上解决将是可观的.
我已经安装了包含类型的pdf
npm install --save pdf @types/pdf
不幸的是,我找不到任何关于如何使用它的文档.如果我做:
import {PDFJS} from 'pdf';
PDFJS.getDocument(fileName)
我明白了:
TyeError: Cannot read 'getDocument' of undefined
那么我应该如何初始化呢？
在我的 ReactJS 应用程序中，我需要添加放大/缩小功能。我正在使用react-pdf在我的网络应用程序中显示 PDF。文档的A/C有一个scale prop我可以使用它scale的 pdf 页面。
但是使用scale prop并没有向我显示zoom因子的任何变化。这是code我用来这样做的。
<Document
loading=""
file={file}
className="document"
onLoadSuccess={(transport) => onLoadSuccess(transport, sectionIndex)}>
<Page width={900} scale={30} className="page" pageNumber={1} />
</Document>
我试过以下值，scale prop但似乎没有得到任何东西。1.5、0.5、10、30、40。有没有更好的方法来做同样的事情，或者我错过了什么？
上下文
我正在尝试将PDF.JS导入TypeScript项目.我使用的是DefinitelyTyped 绑定的pdfjs-dist,通过安装npm install @types/pdfjs-dist和npm install pdfjs-dist.
问题
我似乎无法使用TypeScript来编译我的项目.我正在使用直接从DefinitelyTyped上的测试中复制的源代码.这是我正在尝试编译的简化(仅删除)代码(来自DefinitelyTyped的测试代码的精确副本也以相同的方式失败):
import { PDFJSStatic } from 'pdfjs-dist';
var PDFJS: PDFJSStatic;
PDFJS.getDocument('helloworld.pdf').then(console.log);
TypeScript查找类型声明模块,并认为导入PDFJSStatic有效.它不认为PDFJS是以往任何时候都初始化,但是如果我关掉strict中tsconfig,代码编译,但它编译于:
"use strict";
exports.__esModule = true;
var PDFJS;
PDFJS.getDocument('helloworld.pdf').then(console.log);
这显然不起作用.它没有将import声明编译成任何东西.
题
如何将PDF.JS导入TypeScript项目并通过声明文件将其编译为工作的Node.JS代码@types/pdfjs-dist？
我试过的
我尝试了不同的变化import,但无济于事.切换到require也似乎没有帮助.
我已经验证了pdjs-dist依赖关系以及@types/pdfjs-dist依赖关系是否直接来自NodeJS(非TypeScript程序),是否存在,更新和可用.
我module在tsconfig中尝试了各种值.它们有时会更改生成的代码,但它们都没有更改它以包含所需的导入.
我试着将/// <reference path="../node_modules/@types/pdfjs-dist/index.d.ts" />上面的import线.这并没有改变这种行为.
环境
tsc版本2.4.2,节点8.5和npm5.3.我的tsconfig.json …
我尝试在一个小型打字稿应用程序中使用 pdfjs，将parceljs 作为捆绑器，但是当我加载工作人员时：
pdfjsLib.GlobalWorkerOptions.workerSrc = '../../node_modules/pdfjs-dist/build/pdf.worker.min.js';
我在 Firefox 控制台中收到此错误：
pdf.worker.min.js” was loaded even though its MIME type (“text/html”) is not a valid JavaScript MIME type
并且没有加载工人。
如果我像这样加载工人：
pdfjsLib.GlobalWorkerOptions.workerSrc = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/${(pdfjsLib as any).version}/pdf.worker.min.js`;
一切正常。
我查看了错误的 MDN 描述，我听起来像是一些服务器端的事情，那么它是否是包裹服务器的限制，是否有解决方法？
我想在 angular 项目中使用 pdfjs-dist 包。如何导入它的角度项目
我安装它使用
npm install --save pdfjs-dist
但不知道如何导入特定组件并使用它
我在我的“@angular/cli”：“~7.0.7”项目中使用“jspdf”：“^1.5.3”包，
我使用 pdf 库创建了简单的文件，如下所示，现在要求将http://www.africau.edu/images/default/sample.pdf pdf附加到我创建的 jsPDF 文件并下载它。
//app.component.ts file
<a (click)="download();">ClickHere</a>
//app.component.ts file
import * as jsPDF from 'jspdf'
download() {
var doc = new jsPDF('p', 'pt', 'letter');
var pageHeight = doc.internal.pageSize.height;
var y = 800;
var x = 800;
doc.text(100, 100, 'com1');
if (y >= pageHeight) {
doc.addPage();
doc.text(100, 100, 'com1');
y = 0;
}
if (x >= pageHeight) {
doc.addPage();
doc.text(100, 100, 'com1');
x = 0;
}
const merge = require('easy-pdf-merge');
merge(doc, 'http://www.africau.edu/images/default/sample.pdf', function (err) {
if …我正在使用 pdf.js 从我的数据库中显示多个 pdf 文件。我稍微修改了 base64 示例代码，所以我的代码如下所示：
<script src="//mozilla.github.io/pdf.js/build/pdf.js"></script>
<script>
$(document).ready(function () {
var pdfjsLib = window['pdfjs-dist/build/pdf'];
// The workerSrc property shall be specified.
pdfjsLib.GlobalWorkerOptions.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';
let canvas = $('.pdfOferta');
for (let i = 0; i < canvas.length; i++) {
var pdfData = canvas[i].getAttribute['data-pdf'];
var loadingTask = pdfjsLib.getDocument({ data: pdfData });
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: …我正在使用PDFMAKE创建base64编码的pdf,我试图通过将编码的base64提供给iframe src来显示它.它适用于PC,但它不适用于移动设备(android和ios).
我想在客户端制作一个pdf,并在Ionic中使用缩放功能预览给用户.
如果有人得到任何解决方案,请分享,谢谢.
Web应用程序允许用户使用浏览器的打印对话框打印pdf文档.这些文档是使用mimetype application/pdf从服务流式传输的.在Web客户端中,创建iframe并将其附加到document.body,并为源设置返回内容的服务的uri.框架如下:
<iframe id="printPage" name="printPage" src="/remote/api/export/resource_name" style="position: absolute; top: -1000px; width: ${opts.frameWidth}px; height: ${opts.frameHeight}px;"></iframe>
javascript中的打印执行部分是这样的
let iframe = $('the_iframe_html_above');
iframe.load(() => {
window.frames.printPage.focus();
window.frames.printPage.print();
});
$('body').append(iframe);
这样,打印对话框仅在Chrome和Safari浏览器下按预期打开.
所以我的问题是:如果有这样的条件,有一种crossbrowser方式来执行打印操作(打开浏览器的本机打印对话框)？