网页在线打开PDF_网站中在线查看PDF之TouchPDF

太过爱你忘了你带给我的痛 2023-01-17 06:22 109阅读 0赞

**一、网页在线打开PDF\_网站中在线查看PDF之TouchPDF**

TouchPDF是用于jQuery的简单Web PDF查看器。它基于pdf.js库，并支持用于滑动页面和缩放的移动手势。

可以实现的功能

*  用手指滑动到下一页或上一页
 *  捏放大和缩小
 *  跟随指向文档部分或外部URL的链接
 *  添加彩色标签以快速访问加标签的页面
 *  直接加载到您的DOM中，而无需iFrame

浏览器支持：Firefox，Chrome，Opera，IE> = 9，Safari，Android浏览器

Git代码下载：[https://github.com/May1st/pdf-online-h5-in-IOS-ANDROID][https_github.com_May1st_pdf-online-h5-in-IOS-ANDROID]

**二、 TouchPDF 使用步骤，比较简单**

1.引用对应的js库

2.指定pdf地址，同域名下的pdf文件，如果不是相同域名下请处理跨域标识

执行解析操作：

$(function() {      
      $("#myPDF").pdf( {
        source: "demo.pdf",
        tabs: [
          {title: "Tab 1", page: 2, color: "orange"},
          {title: "Tab 2", page: 3, color: "green"},
          {title: "Tab 3", page: 5, color: "blue"},
        ]
     });

如果是不同域名下，数据源处理跨域：.net core 代码示例

$("#myPDF").pdf({
                    source: "http://localhost:63198/test/pdf",
                    tabs: [
                        { title: "Section 1", page: 2, color: "orange" },
                        { title: "Section 2", page: 3, color: "green" },
                        { title: "Section 3", page: 5, color: "blue" },
                    ]
                });

namespace MvcTest2.Controllers
    {
    
        [EnableCors("any")]
        [Route("{controller}/{action}")]
        public class TestController : Controller
        {
            public IActionResult Pdf()
            {
                return File("/file/2021.pdf", "application/octet-stream", "学校.pdf");
            }
        }
    }

**三、运行效果：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTExMjcwMTk_size_16_color_FFFFFF_t_70][]

## [ JS 自定义实现数字滚动处理][JS] ##

## [Echarts 开源，免费商用图表控件使用整理][Echarts] ##

## [ js网页中实现复制功能，clipboard.js][js_clipboard.js] ##

[https_github.com_May1st_pdf-online-h5-in-IOS-ANDROID]: https://github.com/May1st/pdf-online-h5-in-IOS-ANDROID
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTExMjcwMTk_size_16_color_FFFFFF_t_70]: /images/20221021/72fc333abc8847099d4ec05f84ff2a6f.png
[JS]: https://blog.csdn.net/u011127019/article/details/112844526
[Echarts]: https://blog.csdn.net/u011127019/article/details/111404485
[js_clipboard.js]: https://blog.csdn.net/u011127019/article/details/106588055