腾讯云对象存储小程序快速集成文档预览

简介

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

预览服务对比

本文采用同步方式接入文档预览服务，如您有更多需求，可以了解两种预览服务的异步接入方式：文档转 HTML 预览（异步） 和 文档转图片预览（异步）。

说明关于费用介绍，请参见 文档处理费用。

文档转 HTML 预览

步骤1：获取文档转 HTML 预览链接

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

步骤2：配置业务域名

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


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

步骤3：使用 webview 实现文档转 HTML 预览

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

<web-view src="{{url}}"></web-view>

获取示例代码：微信小程序 – 文档转 HTML 预览示例代码

文档转图片预览

步骤1：获取文档转图片预览链接

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

步骤2：配置 downloadFile 合法域名

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


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

步骤3：实现文档转图片预览

1. 在 微信开发者工具 中，新建一个微信小程序。2. 使用 wx.downloadFile 下载文档图片资源到本地。可从请求结果中获取文档总页数与临时图片地址。此处的 url 为文档转图片预览链接，例如 https://.cos..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 预览与文档转图片预览的实际效果。


对象存储官网1折活动，限时活动，即将结束，速速收藏
同尘科技为腾讯云授权服务中心。
购买腾讯云产品享受折上折，更有现金返利。同意关联立享优惠