vue中如何使用embed标签PDF预览

目录
  • 使用embed标签PDF预览
    • embed的四个属性
  • 使用vue-pdf预览开发正常，打包报错work.js404
    • 解决方式

使用embed标签PDF预览

embed的四个属性

	<el-row type="flex" class="row-bg" justify="space-between">
	  <el-col :span="12">
	    <embed
               :src='srcSourceLan'
               type="application/pdf"
               width="90%"
               height="700px;"
	    />
	  </el-col>
	  <el-col :span="12">
	    <embed
               :src="srcTargetLan"
               type="application/pdf"
               width="90%"
               height="700px;"
	    />
	  </el-col>
	</el-row>

srcSourceLan和srcTargetLan是请求接口返回的url

预览效果：

使用vue-pdf预览开发正常，打包报错work.js404

解决方式

修改依赖文件node_modules下worker-loader里的index.js文件里路径

代码如下（示例）：

 const filename = _loaderUtils2.default.interpolateName(this, options.name || 'static/js/[hash].worker.js', {
    context: options.context || this.rootContext || this.options.context,
    regExp: options.regExp
  });

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue3中各种类型文件进行预览功能实例

    目录 前言 1.office文档类型的预览 2.pdf类型的预览 3. 图片类型 4.视频类型 5. 音频类型 总结 前言 摸着石头过河的滋味不好受啊,听说大厂的大佬们都在忙着用vue3在升级项目,我也没事凑一波热闹.身处某小厂还是不甘于折腾.新做一个项目,直接上vue3 ,头脑发热 ,可能有人不计后果,但是跌跌撞撞还是基本搞完了,那记录一下吧 今天说一下开发过程中的某一个功能吧!反正耗费不少时间,先说说功能需求吧:在上传文件之后的文件列表中能够点击进行预览,包含文件媒体类型包括 图片 .wor

  • Vue实现在线预览pdf文件功能（利用pdf.js/iframe/embed）

    Vue实现在线预览pdf文件功能（利用pdf.js/iframe/embed）

    前言 最近在做一个精品课程,需要在线预览课件ppt,我们的思路是将ppt转换为pdf在线预览,所以问题就是如何实现在线预览pdf了. 在实现的过程中,为了更好地显示效果,我采用了多种不同的方法,最终选择效果最好的pdf.js. 实现方法: 1:iframe 采取iframe将pdf嵌入网页从而达到预览效果,想法很美好,实现很简单,但显示很残酷- 虽然一行代码简洁明了,打开谷歌浏览器效果也还行,但缺点也是十分明显的!!!! <iframe src="http......" widt

  • vue 使用 vue-pdf 实现pdf在线预览的示例代码

    背景 之前的demo增加了图片预览,于是今天下午追完番剧就突然想到能不能把pdf在线预览也做了,说干就干,刚开始查了很多教程,我发现很多人都在说什么pdf.js这个库,这当然没什么问题,pdf.js的确可以非常完美的实现pdf在线预览的过程,但是感觉这样直接进去有点不太优雅,于是找找看看有没有什么现成的组件,发现有vue-pdf这个组件,虽然说它没有原生那样强大,比如不支持pdf文字复制,打印会乱码,但是我感觉已经足以满足我的需求了.本篇笔记循序渐进,从基础的demo,到一个可用的程度,文末列出

  • vue中如何实现pdf文件预览的方法

    今天产品提出一个优化的需求,就是之前我们做的图片展示就是一个img标签搞定,由于我们做的是海外后台管理系统,那边的人上传的文件时pdf格式,vue本事是不支持这种格式文件展示的,于是就google搜索,发现有iframe.embed.vueshowpdf(测试了不咋好用).pdf等,本文说一下pdf插件的使用过程. 说明:iframe标签这种,对于有的链接是可以的,比如这种链接在服务器端没有设置享有头content-disposition,就可以直接显示,如下: 想复制代码如下: <iframe

  • vue中如何使用embed标签PDF预览

    vue中如何使用embed标签PDF预览

    目录 使用embed标签PDF预览 embed的四个属性 使用vue-pdf预览开发正常,打包报错work.js404 解决方式 使用embed标签PDF预览 embed的四个属性 <el-row type="flex" class="row-bg" justify="space-between"> <el-col :span="12"> <embed :src='srcSourceLan' ty

  • Vue中接收二进制文件流实现pdf预览的方法

    后台Controller @RequestMapping("/getPDFStream") @ResponseBody public void getPDFStream(HttpServletRequest request,HttpServletResponse response) { try { request.setCharacterEncoding("utf-8"); } catch (UnsupportedEncodingException e) { log

  • vue中使用vue-pdf组件实现文件预览及相应报错解决

    vue中使用vue-pdf组件实现文件预览及相应报错解决

    目录 前言 一.安装npm 依赖 二.引入组件 1.html中使用组件 单页 2.数据处理 单页 三.项目使用--代码部分 四.报错解决 总结 前言 使用vue-pdf组件实现文件预览功能 并在文件上增加操作按钮vue3不支持vue-pdf,vue3项目用pdfjs-dist 一.安装npm 依赖 1.在根目录下输入一下命令 npm i pdfjs-dist@2.5.207 --save npm i vue-pdf@4.2.0 --save 2.修改pacakge.json文件 "depende

  • vue 中使用print.js导出pdf操作

    1.print.js // 打印类属性.方法定义 /* eslint-disable */ const Print = function (dom, options) { if (!(this instanceof Print)) return new Print(dom, options); this.options = this.extend({ 'noPrint': '.no-print' }, options); if ((typeof dom) === "string") {

  • Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤

    Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤

    实现效果 可用插件介绍 Mozilla 提供了 PDF.js和pdfjs-dist,两者的区别如下: PDF.js ,一个完整的 PDF 查看器,可以直接使用其提供的 viewer.html 查看 PDF 内容,包含完整样式和相关功能.优点是快速集成,不需要自己实现查看器的功能和样式.缺点是如果要自定义样式和功能,反而会很麻烦. pdfjs-dist ,PDF.js 的预购建版本,只包含 PDF 内容的渲染功能,需要自己实现查看器的样式和相关功能. Vue 官方插件库 Awesome Vue.j

  • vue中v-for循环给标签属性赋值的方法

    1.给每个按钮添加class的属性值以及icon图标属性值,通过v-for实现自动添加样式,发现属性值无法显示,切记在属性前加上v-bind <html> <head> <meta charset="utf-8"> <title>v-for在线测试实例</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"> &

  • 在vue中把含有html标签转为html渲染页面的实例

    在vue中把含有html标签转为html渲染页面的实例

    在标签内部添加v-html指令即可 使用pug的写法: 这个content表示的是一个含标签的变量 输入content为:<p>我是p标签</p> 输出结果是:我是p标签 普通用户一样: 同上理 加v-html就行了 以上这篇在vue中把含有html标签转为html渲染页面的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • vue中使用h5 video标签实现弹窗播放本地视频的方法

    目录 1.弹窗的打开关闭 2. 本地视频资源路径的引入 3. 视频播放完毕自动关闭弹窗 4. 视频在弹窗中自适应大小 参考h5 < video >标签的用法 在开发过程中主要涉及到以下几个需要关注的点 1.弹窗的打开关闭 父组件中使用.sync绑定visible属性,可直接在子组件中关闭弹窗更新父组件传入的visible值: // 父组件中引用子组件 <video-modal :visible.sync="showVideoModal"> // 子组件中 <

  • vue+node实现图片上传及预览的示例方法

    vue+node实现图片上传及预览的示例方法

    本文介绍了vue+node实现图片上传及预览的示例方法,分享给大家,具体如下: 先上效果图 上代码 html部分主要是借助了weui的样式 <template> <div> <myheader :title="'发布动态'"> <i class="iconfont icon-fanhui1 left" slot="left" @click="goback"></i>

  • Vue实现手机扫描二维码预览页面效果

    本文实例为大家分享了Vue实现手机扫描二维码预览页面的具体代码,供大家参考,具体内容如下 背景:vue-cli3 + ant-design-vue 搭建的后台管理系统 需求:实现扫描二维码即可在手机预览H5页面功能 使用插件:qrcode step1:安装插件 npm install qrcode --save step2:引入插件 在项目中新建QRcode.vue文件 <template> <div id="qrCode"> <div id="

随机推荐