jquery 文件流application/pdf 转为blob
时间: 2023-09-26 16:04:56 浏览: 87
可以使用 `XMLHttpRequest` 对文件进行请求并将其转化为 `Blob` 对象。以下是一个示例代码:
```javascript
function getFileBlob(url, cb) {
var xhr = new XMLHttpRequest();
xhr.open("GET", url);
xhr.responseType = "blob";
xhr.addEventListener('load', function() {
cb(xhr.response);
});
xhr.send();
}
getFileBlob('http://example.com/file.pdf', function(blob) {
// 处理 blob 对象
});
```
其中 `url` 是你需要获取的文件的链接。通过 `XMLHttpRequest` 发送请求并设置 `responseType` 为 `blob`,请求完成后在回调函数中获取到 `Blob` 对象。
相关问题
js 文件流application/pdf 转为blob
可以使用 XMLHttpRequest 对文件进行加载并转换为 Blob 对象。下面是一个简单的示例代码:
```javascript
function getFileBlob(url, success) {
var xhr = new XMLHttpRequest();
xhr.open("GET", url);
xhr.responseType = "blob";
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
success(xhr.response);
}
};
xhr.send();
}
getFileBlob("example.pdf", function(blob) {
// 处理 blob 对象
});
```
在上面的代码中,我们通过 XMLHttpRequest 发送一个 GET 请求,设置 responseType 为 "blob",以获取 PDF 文件的 Blob 对象。然后使用回调函数将 Blob 对象传递给另一个函数进行处理。
注意:在调用 getFileBlob 函数时,需要将 URL 参数替换为实际的文件 URL。
Vue pdf blob 文件流 pdfjs-dist 预览
对于在Vue中使用pdf.js-dist预览blob文件流的问题,你可以按照以下步骤进行操作:
1. 安装pdf.js-dist库:
```shell
npm install pdfjs-dist
```
2. 在Vue组件中引入pdf.js-dist库:
```javascript
import pdfjsLib from 'pdfjs-dist'
```
3. 创建一个方法来加载并预览blob文件流:
```javascript
async loadBlobPdf(blob) {
const loadingTask = pdfjsLib.getDocument({ data: blob })
const pdf = await loadingTask.promise
const pageNumber = 1
const page = await pdf.getPage(pageNumber)
const scale = 1.5
const viewport = page.getViewport({ scale })
const canvas = this.$refs.pdfCanvas
const context = canvas.getContext('2d')
canvas.height = viewport.height
canvas.width = viewport.width
const renderContext = {
canvasContext: context,
viewport: viewport
}
await page.render(renderContext)
}
```
4. 在模板中使用canvas元素来显示pdf:
```html
<canvas ref="pdfCanvas"></canvas>
```
5. 调用loadBlobPdf方法并传入blob文件流:
```javascript
const response = await fetch('your_blob_file_url')
const blob = await response.blob()
this.loadBlobPdf(blob)
```
以上步骤会将blob文件流加载并在canvas中预览。记得将'your_blob_file_url'替换为实际的blob文件的URL。