window.URL.createObjectURL(blob) 预览 PDF 设置文件名称
时间: 2023-11-11 18:57:45 浏览: 69
要预览 PDF 并设置文件名称,可以使用如下代码:
```javascript
const blob = new Blob([pdfData], { type: 'application/pdf' });
const url = window.URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = 'myPDF.pdf'; // 设置文件名称
link.click();
```
其中,`pdfData` 是 PDF 文件的二进制数据。通过 `window.URL.createObjectURL()` 可以生成用于预览 PDF 的 URL。然后创建一个 `<a>` 标签,将生成的 URL 赋值给 `href` 属性,并将 `download` 属性设置为要保存的文件名称即可。
相关问题
let fileURL = window.URL.createObjectURL(blob) window.open(fileURL); 怎么让文件能够在浏览器里面预览
要在浏览器中预览文件,你可以使用适当的媒体类型和浏览器支持的预览方法。以下是一些常见的文件类型和相应的预览方法示例:
1. 图片文件(如JPEG、PNG、GIF):可以直接在浏览器中显示。你可以创建一个`<img>`元素,并将`fileURL`作为其`src`属性值。
```javascript
const img = document.createElement('img');
img.src = fileURL;
document.body.appendChild(img);
```
2. 文本文件(如txt、csv、log):可以将文件内容显示在`<pre>`或`<textarea>`元素中。
```javascript
fetch(fileURL)
.then(response => response.text())
.then(text => {
const pre = document.createElement('pre');
pre.textContent = text;
document.body.appendChild(pre);
});
```
3. PDF文件:可以使用PDF.js库来呈现PDF文件。首先,确保在你的HTML文件中引入了PDF.js库,然后使用以下代码:
```javascript
const pdfViewer = document.createElement('iframe');
pdfViewer.src = `https://mozilla.github.io/pdf.js/web/viewer.html?file=${fileURL}`;
pdfViewer.style.width = '100%';
pdfViewer.style.height = '600px';
document.body.appendChild(pdfViewer);
```
这些只是一些常见的文件类型的预览方法示例,具体取决于你要预览的文件类型和浏览器支持的功能。请根据你的需求和文件类型选择适当的方法。
vue-pdf-signature预览pdf
vue-pdf-signature是一个用于在Vue项目中预览PDF文件的库。它提供了一个名为pdf的组件,可以轻松地将PDF文件嵌入到你的Vue模板中。你可以通过引入pdf和CMapReaderFactory来使用vue-pdf-signature库。
在模板中,你可以使用<iframe>标签来显示PDF文件。在你的模板中,你需要定义一个ref属性,以便在后面的代码中引用它。你可以将PDF文件的src属性设置为一个变量,以便动态加载不同的PDF文件。
在你的方法中,你可以使用axios库来获取PDF文件的数据。你需要使用 responseType: 'blob' 选项来指定响应数据的类型为blob。然后,你可以创建一个Blob对象,将获取到的数据传递给它,并将其类型设置为'application/pdf'。接下来,你可以使用window.URL.createObjectURL方法创建一个URL,将其设置为iframe的src属性,从而显示PDF文件。
最后,你需要注意的是,如果你想在打印PDF文件时使用浏览器的打印功能,你可以使用window.open方法打开一个新窗口,并将PDF文件的URL作为参数传递给它。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)