embed用法参考(一)

我们要在网页中正常显示flash内容,那么页面中必须要有指定flash路径的标签。也

就是OBJECT和EMBED标签。OBJECT标签是用于windows平台的IE浏览器的,而EMBED是用

于windows和Macintosh平台下的Netscape Navigator浏览器以及Macintosh平台下的IE

浏览器。windows平台的IE利用Activex控件来播放flash而其它的浏览器则使用

Netscape插件技术来播放flash。

下面是简单的网页中插入flash的代码示例:

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"
WIDTH="550" HEIGHT="400" >
<PARAM VALUE="myFlashMovie.swf">
<PARAM VALUE=high>

<PARAM VALUE=#FFFFFF>
<EMBED src="/support/flash/ts/documents/myFlashMovie.swf" quality=high bgcolor=#FFFFFF WIDTH="550" HEIGHT="400"
NAME="myMovieName" ALIGN="" TYPE="application/x-shockwave-flash"

PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">
</EMBED>

</OBJECT>

为什么要使用以上全部的标签?能省略某些标签不?

OBJECT标签是用于windows IE3.0及以后浏览器或者其它支持Activex控件的浏览

器。“classid”和“codebase”属性必须要精确地按上例所示的写法写,它们告诉浏

览器自动下载flash player的地址。如果你没有安装过flash player 那么IE3.0以后

的浏览器会跳出一个提示框访问是否要自动安装flash player。当然,如果你不想让

那些没有安装flash player的用户自动下载播放器,或许你可以省略掉这些代码。

EMBED标签是用于Netscape Navigator2.0及以后的浏览器或其它支持Netscape插件的

浏览器。“pluginspage”属性告诉浏览器下载flash player的地址,如果还没有安装

flash player的话,用户安装完后需要重启浏览器才能正常使用。

为了确保大多数浏览器能正常显示flash,你需要把EMBED标签嵌套放在OBJECT标签

内,就如上面代码例子一样。支持Activex控件的浏览器将会忽略OBJECT标签内的

EMBED标签。Netscape和使用插件的IE浏览器将只读取EMBED标签而不会识别OBJECT标

签。也就是说,如果你省略了EMBED标签,那firefox就不能识别你的flash了(不过纳

闷的是,省略了object只写embed,IE也能正常显示 flash,呵呵,具体的再仔细看看

了)。

本文列出了用于发布影片的OBJECT和EMBED标签的必要以及可选属性。

一、必需属性

·CLASSID-设置浏览器的Activex控件,仅用于OBJECT标签。

·CODEBASE-设置flash Activex控件的位置,因而如果浏览器如果没有安装的话,可以自动下载安装。仅用于OBJECT标签。

·WIDTH-以百分比或象素指定flash影片的宽度。

·HEIGHT-以百分比或象素指定flash影片的高度。

·SRC-指定影片的下载地址。仅用于EMBED标签。

·PLUGINSPAGE-设置flash 插件的位置,因而如果浏览器如果没有安装的话,可以自动下载安装。仅用于EMBED标签。

·MOVIE-指定影片的下载地址。仅用于OBJECT标签。

二、可选属性及可用的值

·ID-设定变量名,用于脚本代码的引用。仅用于OBJECT。

·NAME -设定变量名,用于脚本代码(如javascript)的引用。仅用于EMBED。

·SWLIVECONNECT - (true或false)指定当flash player第一次下载时,是否启用

java。如果些属性省略,默认值为false。你果你在相同页同使用javascript和flash,java必须使用FSCommand来工作。

·PLAY -(true或false)指定flash影片是否在下载完成后就自动播放,如果省略此

属性,则默认为true。

·LOOP - (true或false)指定影片播放完最后一帧后是停止还是继续循环播放,如果省略此属性,则默认为true。

·MENU - (true或false)

·True 显示全部的菜单,允许用户放大,缩小等控制影片播放等操作。

·False 显示只包含设置选项和关于flash的菜单。

·QUALITY - (low, high, autolow, autohigh, best )

 ·Low 速度优于美观,而且不应用反锯齿。

 ·Autolow 刚开始着重于速度,但当需要时随时提升美观。

 ·Autohigh 同时着重播放速度和美观,但需要时则牺牲美观来保证播放速度。

 ·Medium 应用一些反锯齿而不平滑位图。它质量高于low设置而低于high设置。

 ·High 美观优于播放速度,而且一直应用反锯齿。如果影片不包含动画,位图会被

平滑化;而如果影片包含动画,位图将不变平滑。

·Best 提供最好的显示质量而不考虑播放速度。所有输出都应用反锯齿及所有位图

都被平滑化。

·SCALE - (showall, noborder, exactfit)

·Default(Show all)影片在指定的区域内显示,但保持原始的比例。影片两侧将会出现边框。

·No Boder 收缩影片以适合指定的区域,保持影片不失真,但部分影片将可能将裁切。然而保持影片的原始比例。

·Exact Fit 使整个影片在指定的区域内显示,影片有可能变形失真,而且不保持原始的比例。

·ALIGN - (l, t, r, b)
·默认为居中,当浏览器窗口小于影片时,边缘会被裁切。

·Left,Right,Top,Bottom按照相应的设置沿浏览器的边缘对齐。如果需要,另外三边将被裁切。

·SALIGN - (l, t, r, b, tl, tr, bl, br)
·L,R,T,B
·TL,TR
·BL,BR
·WMODE- (window, opaque, transparent) 设置flash影片的window mode属性,指定flash在浏览器中的透明,层叠及位置。
 ·Window 影片在浏览器中自己的矩形窗口内播放。

 ·Opaque 影片隐藏了所有在它后面的内容。

 ·Transparent 使flash影片透明,显示透明影片后面的网页内容。这将会降低动画

的性能。而且这个属性不是在所有浏览器中都可用的。

·BGCOLOR - (#RRGGBB, 十六进制RGB值。)指定影片的背景颜色。使用这个属性覆盖flash中设定的背景颜色。

·BASE - 设定基准目录或URL,用来解决所以flash中的相对路径。类似网页中的<base>标签。

·FLASHVARS 传递变量到flash player,需要flash player6及以后的版本。

 ·传递root级变量到影片。字符串的格式是用“&”分隔的name=value集。

 ·浏览器支持64kB大小的字符串长度。

 ·更多关于FlashVars的信息,请查看相关文档。

### 如何在 Vue3 中集成和使用 vue-pdf-embed 库 #### 1. 安装依赖 为了在 Vue3 项目中使用 `vue-pdf-embed`,首先需要安装该库及其相关依赖项。可以通过 npm 或 yarn 进行安装: ```bash npm install vue-pdf-embed pdfjs-dist ``` 或者 ```bash yarn add vue-pdf-embed pdfjs-dist ``` 此操作会自动安装必要的依赖包,包括用于解析 PDF 的 `pdfjs-dist`。 --- #### 2. 引入库并配置样式 在 Vue 组件中引入 `vue-pdf-embed` 并加载其默认样式文件。以下是具体的代码示例: ```javascript <script setup> import VuePdfEmbed from 'vue-pdf-embed' // 加载注释层和文本层的样式(可选) import 'vue-pdf-embed/dist/styles/annotationLayer.css' import 'vue-pdf-embed/dist/styles/textLayer.css' const pdfSource = '<PDF_URL>' // 替换为实际的 PDF 文件路径或 URL </script> ``` 注意:这里的 `<PDF_URL>` 可以是远程服务器上的 PDF 资源链接、Base64 编码字符串或其他形式的数据流[^2]。 --- #### 3. 使用组件 定义好数据源后,在模板中可以直接使用 `<VuePdfEmbed />` 组件来渲染 PDF 页面。以下是一个完整的例子: ```html <template> <div class="pdf-container"> <!-- 渲染整个 PDF --> <VuePdfEmbed :source="pdfSource" /> <!-- 如果只想显示特定页面,可以传递 page 属性 --> <VuePdfEmbed :source="pdfSource" :page="2" /> </div> </template> <style lang="scss" scoped> /* 自定义样式 */ .pdf-container { width: 100%; height: auto; /* 让 PDF 部分居中显示 */ :deep(.vue-pdf-embed__page) { display: flex; align-items: center; justify-content: center; } } </style> ``` 在此示例中,`:source` 是必填属性,表示要加载的 PDF 文件地址;而 `:page` 则允许指定只渲染某页的内容[^4]。 --- #### 4. 处理本地资源 如果需要处理的是本地存储的 PDF 文件,则需特别注意跨域问题以及浏览器的安全策略。通常的做法是将 PDF 放置在项目的静态目录下,并通过相对路径访问它。例如: ```javascript const pdfSource = '/static/example.pdf' // 假设 example.pdf 存在于 public/static 下 ``` 对于更复杂的场景,比如动态加载 Base64 数据或通过 API 获取 PDF 流,也可以按照官方文档中的说明进行设置[^3]。 --- #### 5. 实现额外功能 除了基本的 PDF 显示外,还可以扩展其他交互功能,如打印、下载等。这些功能可通过组合原生 JavaScript 方法与事件监听器完成。下面提供了一个简单的打印按钮实现方案: ```html <button @click="printPdf">打印当前页</button> <script setup> function printPdf() { window.print() } </script> ``` 更多高级特性请参考官方文档或社区案例。 --- ### 总结 以上介绍了如何在 Vue3 项目中集成 `vue-pdf-embed` 插件,并展示了基础用法些常见优化技巧。无论是线上还是离线环境下的 PDF 查看需求都可以借助这个工具高效解决。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值