Javascript 在浏览器中使用PDFkit,从链接插入图像
有没有一种简单的方法可以从url获取图像并将其放入PDFKit pdf中 我有一个PDF正在浏览器中自动生成。我想包括一个图像,我有一个URL。问题是我正在浏览器中生成PDF。因为我可以从互联网上获得URL,所以似乎应该有一种简单的方法将该图像转换为PDFKit可读的内容 Javascript有没有办法将图像URL转换为PDFKit可读的缓冲区 我想要的是您希望以下命令执行的操作:Javascript 在浏览器中使用PDFkit,从链接插入图像,javascript,node.js,node-pdfkit,Javascript,Node.js,Node Pdfkit,有没有一种简单的方法可以从url获取图像并将其放入PDFKit pdf中 我有一个PDF正在浏览器中自动生成。我想包括一个图像,我有一个URL。问题是我正在浏览器中生成PDF。因为我可以从互联网上获得URL,所以似乎应该有一种简单的方法将该图像转换为PDFKit可读的内容 Javascript有没有办法将图像URL转换为PDFKit可读的缓冲区 我想要的是您希望以下命令执行的操作: doc.image('http://upload.wikimedia.org/wikipedia/commons/
doc.image('http://upload.wikimedia.org/wikipedia/commons/0/0c/Cow_female_black_white.jpg')
提前谢谢。我在网上找到的解决方案让服务器接收链接,并使用缓冲区进行响应。这是唯一的办法吗?或者是否有一种不使用http发布的全浏览器方式?我通过AJAX将图像检索为base64编码字符串,然后使用以下代码将base64编码字符串转换为可用的缓冲区:
var data = atob(base64);
var buffer = [];
for (var i = 0; i < data.length; ++i)
buffer.push(data.charCodeAt(i));
buffer._isBuffer = true;
buffer.readUInt16BE = function(offset, noAssert) {
var len = this.length;
if (offset >= len) return;
var val = this[offset] << 8;
if (offset + 1 < len)
val |= this[offset + 1];
return val;
};
pdf.image(buffer);
var data=atob(base64);
var缓冲区=[];
对于(变量i=0;i=len)返回;
var val=this[offset]这是一个相当老的问题,但我会添加注释,因为这是在谷歌上查找“pdfkit浏览器图像”时的第一个建议
我的解决方案基于数据uri选项:
只需传递带有base64编码数据的图像路径、缓冲区或数据uri
添加到image方法以及一些可选参数
因此,在快速浏览之后,我发现从图像URL获取数据uri的一般方法是使用canvas,。将其放在:
我会在这个问题上权衡我的2美分,因为我刚刚花了很多时间让它发挥作用。这是我在谷歌搜索这个问题时发现的一系列答案
var doc = new PDFDocument();
var stream = doc.pipe(blobStream());
var files = {
img1: {
url: 'http://upload.wikimedia.org/wikipedia/commons/0/0c/Cow_female_black_white.jpg',
}
};
在某个位置使用上述对象来存储pdf中所需的所有图像和其他文件
var filesLoaded = 0;
//helper function to get 'files' object with base64 data
function loadedFile(xhr) {
for (var file in files) {
if (files[file].url === xhr.responseURL) {
var unit8 = new Uint8Array(xhr.response);
var raw = String.fromCharCode.apply(null,unit8);
var b64=btoa(raw);
var dataURI="data:image/jpeg;base64,"+b64;
files[file].data = dataURI;
}
}
filesLoaded += 1;
//Only create pdf after all files have been loaded
if (filesLoaded == Object.keys(files).length) {
showPDF();
}
}
//Initiate xhr requests
for (var file in files) {
files[file].xhr = new XMLHttpRequest();
files[file].xhr.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
loadedFile(this);
}
};
files[file].xhr.responseType = 'arraybuffer';
files[file].xhr.open('GET', files[file].url);
files[file].xhr.send(null);
}
function showPDF() {
doc.image(files.img1.data, 100, 200, {fit: [80, 80]});
doc.end()
}
//IFFE that will download pdf on load
var saveData = (function () {
var a = document.createElement("a");
document.body.appendChild(a);
a.style = "display: none";
return function (blob, fileName) {
var url = window.URL.createObjectURL(blob);
a.href = url;
a.download = fileName;
a.click();
window.URL.revokeObjectURL(url);
};
}());
stream.on('finish', function() {
var blob = stream.toBlob('application/pdf');
saveData(blob, 'aa.pdf');
});
我遇到的最大问题是将信息从arraybuffer
类型获取到一个包含base64数据的字符串。我希望这会有所帮助
这里是大部分xhr代码的来源。我使用NPM包axios获得base64编码的缓冲区:
在项目文件夹中:
npm i axios
代码:
从中获取图像的服务器可能需要是您的(同一来源)或者需要使用适当的CORS标题进行响应。Wikimedia.org会,但大多数服务器不会。如果您需要使用任意URL,那么您的服务器将不得不代理该图像。它是我的服务器。因此,在这种情况下,有没有简单的方法可以做到这一点?上面的代码arraybuffer intodoc.image()
不起作用。。。
npm i axios
var axios = require('axios');
let image = await axios.get("url", {responseType: 'arraybuffer'});
doc.image(image.data, 12, h, {
width: 570,
align: 'center',
valign: 'center'
});