Vue前端JavaScript實現PDF預覽與圖片預覽

• 說明
• PDF.JS
• 代碼實現
• 預覽測試
• embed與iframe標簽
• • `<embed>`
  • `<iframe>`
  • 瀏覽器預覽

說明

圖片預覽：使用Blob創建一個指向類型化數組的URL

PDF預覽：1借助PDF.JS實現 2.embed與iframe標簽實現

World預覽：先Wolrd轉PDF，再借助PDF.JS實現

PDF.JS

pdf.js是 一個通用的、基于web標準的解析和渲染PDF的平臺。

官網:https://mozilla.github.io/pdf.js/

下載后，壓縮包內目錄結構

將其拷貝至Vue項目中

代碼實現

<template><div><a-modal :visible="previewShow" :width="1050":closable="true":footer="null"@cancel="() =>{previewShow = false}"><a-spin :spinning="previewLoading" :delay="100"><template v-if="imageOrdocument"><img style="width: 100%" :src="previewUrl"/></template><template v-else><a-spin style="margin-top: 24px" :spinning="false"><iframe :src="document" scrolling="no" style="width: 100%;min-height: 700px;" frameborder="0"></iframe></a-spin></template></a-spin></a-modal></div> </template><script> export default {name: "FilePreview",data() {return {previewShow: false,previewLoading: false,previewUrl: "",imageType: ['jpg', 'png'],documentType: ['pdf'],imageOrdocument: true,document: ''}},methods: {filePreview(id, fileSuffix) {this.previewShow = true;if (this.imageType.includes(fileSuffix.toLowerCase()) || this.imageType.includes(fileSuffix.toUpperCase())) {this.previewLoading = true;this.axios.get(this.$Api.document.fastdfs.downloadFile + "/" + id, {responseType: 'blob'}).then((jo) => {if (!jo) {return}let imgData = new Blob([jo.data], {type: "image/jpeg"});this.previewUrl = URL.createObjectURL(imgData);this.imageOrdocument = true;this.previewLoading = false;});} else if (this.documentType.includes(fileSuffix.toLowerCase()) || this.documentType.includes(fileSuffix.toUpperCase())) {this.imageOrdocument = false;this.document = "public/pdf/web/viewer.html?file=" + this.$Api.BaseUrl + this.$Api.document.fastdfs.downloadFile + "/" + id;} else {this.$message.error("不支持預覽")}}} } </script><style scoped></style>

預覽測試

embed與iframe標簽

<embed>和<iframe>都是HTML中用于嵌入其他文檔或媒體文件的標簽。它們的主要區別在于嵌入內容的類型和使用情況

注意：
如果瀏覽器沒有已安裝的PDF插件，則無法在瀏覽器中預覽PDF文件，并且瀏覽器將自動下載PDF文件。非主流瀏覽器可能無法支持，如：IE瀏覽器

<embed>

<embed>標記允許將其他類型的內容嵌入到HTML文檔中，例如音頻、視頻、Flash等。它是非標準的HTML元素，但被所有主流的瀏覽器所支持。

<embed src="file.ext" type="mime/type" /> <template><div><a-spin tip="加載中..." :spinning="loading"><embedtype="application/pdf" width="800" height="600":src="this.$Api.BaseUrl+this.$Api.document.previewFile+'/224794'"/></a-spin></div> </template>

<iframe>

<iframe>標記允許在HTML文檔內嵌入另一個HTML文檔或嵌入另一種媒體資源（如PDF文檔）。它允許你在一個網頁中顯示另一個網頁，也可以用來實現類似于對話框的效果。

<iframe src="file.html"></iframe> <template><div><a-spin tip="加載中..." :spinning="loading"><iframe width="800" height="600" :src="this.$Api.BaseUrl+this.$Api.document.previewFile+'/224794'"/></a-spin></div> </template>

注意：使用<iframe>標簽，實則其內部也是使用<embed> 標簽

瀏覽器預覽

也可以直接請求PDF文件地址,或添加一個點擊事件跳轉，若瀏覽器支持則自動進行預覽

<template><div><a-spin tip="加載中..." :spinning="loading"><a @click="preview">PDF預覽</a></a-spin></div> </template> preview(){window.open('url');},

總結

以上是生活随笔為你收集整理的Vue前端JavaScript实现PDF预览与图片预览的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。