文档中心>数据万象>实践教程>文档处理实践>小程序快速集成文档预览

小程序快速集成文档预览

最近更新时间:2024-08-20 17:24:31

我的收藏

简介

本文将介绍在微信小程序中如何通过 腾讯云数据万象(CI) 提供的文档预览功能,实现文档转 HTML 预览文档转图片预览,您可根据自身需求接入不同类型的文档预览服务。

预览服务对比

本文采用同步方式接入文档预览服务,如您有更多需求,可以了解两种预览服务的异步接入方式:文档转 HTML 预览(异步)文档转图片预览(异步)
预览服务
效果
特点
适用场景
文档转 HTML 预览(同步方式)
转 HTML 预览,支持文档播放/翻页/全屏等功能。
接入简单,功能丰富,兼容多种文档格式。
高度还原文档样式,适用于文档格式复杂的场景。
文档转图片预览(同步方式)
转图片预览,支持图片缩放/裁剪/旋转/水印等处理。
实时在线预览,支持对生成的图片进行基础图片处理,使用简单。
比较适用于实时的 word/pdf 文档预览场景。
说明:
关于费用介绍,请参见 文档处理费用

文档转 HTML 预览

步骤一:获取文档转 HTML 预览链接

4. 获取文档对象地址,格式为:https://<BucketName-APPID>.cos.<Region>.myqcloud.com/xxx.<文档格式>
5. 拼接文档预览链接。需在文档对象地址后拼接 ci-process=doc-preview&dstType=html,即:https://<BucketName-APPID>.cos.<Region>.myqcloud.com/xxx.<文档格式>?ci-process=doc-preview&dstType=html 。您可根据自身需求决定是否继续拼接其他 请求参数
说明:
若存储桶为私有读写,则对象地址需要携带签名,详情请参见 请求签名
若存在跨域问题,则需要进行存储桶跨域访问 CORS 设置,详情请参见 设置跨域访问

步骤二:配置业务域名

1. 登录 微信公众平台
2. 单击 开发 > 开发管理 > 开发设置,找到业务域名部分,单击修改,新增两个业务域名并保存。需新增的两个业务域名如下:
https://<BucketName-APPID>.cos.<Region>.myqcloud.com :您需要进行文档转 HTML 预览的对象存储域名。
https://ci-1.prvsh.myqcloud.com :文档转 HTML 预览底层服务域名。



3. 下载校验文件至本地,并将文件放置在域名根目录下。
登录控制台,进入相应存储桶根目录下,上传校验文件,设置该校验文件访问权限为公有读
联系我们 为您在 https://ci-1.prvsh.myqcloud.com 域名下上传校验文件。
详情请参见 业务域名说明
说明:
关于是否需要配置业务域名,您可根据自身情况进行选择。如果只是个人在本地调试,可以在 微信开发者工具 > 详情 > 本地设置 中勾选 “不校验合法域名、web-view(业务域名)、TLS 版本以及 HTTPS 证书”,可不必配置业务域名。如果想要发布上线,那么必须有相应企业小程序并且配置业务域名。

步骤三:使用 webview 实现文档转 HTML 预览

1. 微信开发者工具 中,新建一个微信小程序。
2. 页面中使用 web-view 组件实现内嵌文档预览页面。此处的 url 为文档转 HTML 预览链接。
<web-view src="{{url}}"></web-view>

文档转图片预览

步骤一:获取文档转图片预览链接

4. 获取文档对象地址,格式为:https://<BucketName-APPID>.cos.<Region>.myqcloud.com/xxx.<文档格式>
5. 拼接文档预览链接。需在文档对象地址后拼接 ci-process=doc-preview,即:https://<BucketName-APPID>.cos.<Region>.myqcloud.com/xxx.<文档格式>?ci-process=doc-preview 。您可根据自身需求决定是否继续拼接其他 请求参数 。文档转图片预览支持 基础图片处理 处理参数,您可拼接 ImageParams 参数在预览时对图片进行处理。
说明:
若存储桶为私有读写,则对象地址需要携带签名,详情请参见 请求签名
若存在跨域问题,则需要进行存储桶跨域访问 CORS 设置,详情请参见 设置跨域访问

步骤二:配置 downloadFile 合法域名

1. 登录 微信公众平台
2. 单击 开发 > 开发管理 > 开发设置,找到服务器域名部分,修改 downloadFile 合法域名



3. downloadFile 合法域名中新增域名 https://<BucketName-APPID>.cos.<Region>.myqcloud.com ,即您需要进行文档转图片预览的对象存储域名。保存配置。详情请参见 服务器域名配置

步骤三:实现文档转图片预览

1. 微信开发者工具 中,新建一个微信小程序。
2. 使用 wx.downloadFile 下载文档图片资源到本地。可从请求结果中获取文档总页数与临时图片地址。此处的 url 为文档转图片预览链接,例如 https://<BucketName-APPID>.cos.<Region>.myqcloud.com/xxx.<文档格式>?ci-process=doc-preview&page=1&dstType=png
wx.downloadFile({
url,
method: "GET",
success(res) {
const totalPage = Number(res?.header["X-Total-Page"]) || 0;
const imageUrl = res?.tempFilePath || '';
},
fail(err) {
console.log(err);
}
});
3. 页面加载文档图片,实现文档转图片预览。imageUrl 即下载的临时图片地址。
<image src="{{imageUrl}}"></image>
4. 您可自定义文档转图片预览页面结构与效果,例如一次性请求或者以懒加载的方式请求文档的预览图片,使用 swiper 组件实现文档转图片预览的滑动翻页效果。

Demo 体验

您可使用微信扫描下方的小程序码,在文档预览栏目中使用示例文件或自行上传文件,可分别体验小程序中文档转 HTML 预览与文档转图片预览的实际效果。