网站标题几个字合适,石家庄网站托管,微营销推广软件,济南优化seo网站建设公司今天一天对当前可用的pdf预览插件做了测试#xff0c;主要需求是只能预览不能下载#xff0c;但对于前端来说#xff0c;没有绝对的禁止#xff0c;这里只罗列实现方式。 目前采用vue3版本为#xff1a;3.2.37
iframevue-officepdfjs-dist
iframe
先说最简单的#xf…今天一天对当前可用的pdf预览插件做了测试主要需求是只能预览不能下载但对于前端来说没有绝对的禁止这里只罗列实现方式。 目前采用vue3版本为3.2.37
iframevue-officepdfjs-dist
iframe
先说最简单的iframe可以直接展示pdf文件所以如果不作禁止预览等操作iframe是最合适的。 el-dialogv-modelpreviewOtherUploadreset-drag-positiondraggablesticky:title_options.imgName || 详情footer-hideclass-namevertical-center-modaldivcontextmenu.preventstyleuser-select: none;iframerefiframe:src${modelValue}#toolbar0width100%height600pxloadonIframeLoad/iframe/div/el-dialogscript setup
const modelValue ref(https://501351981.github.io/vue-office/examples/dist/static/test-files/test.pdf)
let previewOtherUpload ref(false);
const iframe ref(null)const clickShow () {previewOtherUpload.value true;
}// 尝试在iframe加载完毕后进行右键禁用但实际需要通过postmessage来处理所以这里无实际用处
const onIframeLoad () {try {console.log(iframe 已加载, iframe.value.contentWindow.window);if (iframe.value.contentWindow.document) {iframe.value.contentWindow.document.addEventListener(contextmenu, (e) e.preventDefault());}} catch (error) {console.error(无法访问 iframe 内容:, error);}
}
/scriptvue-office
vue-office-gitcode地址
安装
#docx文档预览组件
npm install vue-office/docx vue-demi0.14.6#excel文档预览组件
npm install vue-office/excel vue-demi0.14.6#pdf文档预览组件
npm install vue-office/pdf vue-demi0.14.6#pptx文档预览组件
npm install vue-office/pptx vue-demi0.14.6如果是vue2.6版本或以下还需要额外安装 vue/composition-api
npm install vue/composition-api我们如果只预览pdf则安装 npm install vue-office/pdf vue-demi0.14.6 el-dialogv-modelpreviewOtherUploadreset-drag-positiondraggablesticky:title_options.imgName || 详情footer-hideclass-namevertical-center-modaldivcontextmenu.preventstyleuser-select: none;VueOfficePdf:srcmodelValue//div/el-dialogscript setup
import VueOfficePdf from vue-office/pdf
const modelValue ref(https://501351981.github.io/vue-office/examples/dist/static/test-files/test.pdf)
let previewOtherUpload ref(false);const clickShow () {previewOtherUpload.value true;
}
/scriptpdfjs-dist
这是目前最麻烦的一个插件一定先确定下载的版本pdfjs-dist: “2.16.105”我用的是这个否则下面的workerSrc设置会有问题。 el-dialogv-modelpreviewOtherUploadreset-drag-positiondraggablesticky:title_options.imgName || 详情footer-hideclass-namevertical-center-modaldiv idpdf-viewcontextmenu.preventstyleuser-select: none;canvas v-forpage in state.pdfPages :keypage idpdfCanvas /div idtext-view/div/div/el-dialogscript setup
import { computed, reactive, ref, watch, nextTick } from vue;
import * as pdfjsViewer from pdfjs-dist/web/pdf_viewer.js
import pdfjs-dist/web/pdf_viewer.css
import * as PDF from pdfjs-dist
// 设置 pdf.worker.js 路径
PDF.GlobalWorkerOptions.workerSrc ../../../node_modules/pdfjs-dist/build/pdf.worker.js;
let pdfDoc null;const modelValue ref(https://501351981.github.io/vue-office/examples/dist/static/test-files/test.pdf)
let previewOtherUpload ref(false);const clickShow () {loadFile(modelValue)previewOtherUpload.value true;
}const loadFile (url) {PDF.getDocument({url,cMapUrl: https://cdn.jsdelivr.net/npm/pdfjs-dist2.16.105/cmaps/,cMapPacked: true,}).promise.then((pdf) {pdfDoc pdf// 获取pdf文件总页数state.pdfPages pdf.numPagesnextTick(() {renderPage(1) // 从第一页开始渲染})})
}
const renderPage (num) {pdfDoc.getPage(num).then((page) {const canvas document.getElementById(pdfCanvas)const ctx canvas.getContext(2d)const viewport page.getViewport({ scale: state.pdfScale })canvas.width viewport.widthcanvas.height viewport.heightconst renderContext {canvasContext: ctx,viewport}page.render(renderContext)})
}
/script插件样式也不好调整不推荐。
总结 最后还是使用了第二种方式作为禁止下载的展示。
